Как в Vue.JS передать данные в компонент?

Question

[beduin01]

var guestContent = Vue.extend({
      template: `
        <p>Guest content</p>
          `,
        data: function () {
            myquestions: test();            
          }

        }
        );

...
Vue.component('guestcontent', guestContent);

Что я хочу сделать -- я хочу в данном компоненте выводить список вопросов из которые я получаю из функции `test()` в переменную `myquestions`. Вопрос -- как это сделать? И я не совсем понимаю если мне нужны будут правила вывода этих вопросов, а не просто я сделаю v-for (или как там?) цикл, то где мне их описывать? Ну к примеру, что по клику на такой-то вопрос, должно происходить то-то...

Answer 1

[hateyyyy]

Как через props,перекинуть данные родителю в Vue?
Очень похожий вопрос,когда то задавал. Хороший пример скинули.
Данные компоненту передаются через свойство props.
А что касается v-for,если я правильно понял,это может выглядеть вот так

<ul>
    <li v-for = 'question in myquestions'  v-on:click = 'myMethods'>{{question}}</li
</ul>

У компонента в свойстве methods описываешь функцию,которую навешиваешь на событие,в данном случае 'myMethods'.
У тебя создастся список из всех вопросов,которые пришли от функции test
Вроде так

Comments

[beduin01]

Так, правильно ли я понимаю что в data кладутся все данные с которыми я буду работать в данном экземпляре Vue? А могу ли я вне data что-то объявить? И туда данные класть? Data получается это кейворд? Зачем доступ к данным рекомендуют через function () {} делать ?

methods -- тут описывается как с данными из data работать?

[beduin01]

"Данные компоненту передаются через свойство props" то есть я могу внутри самого компонента ему же передать данные? ` myquestions: test(); ` же внутри него объявлен.

[hateyyyy]

data - данные вашего компонента,которые будут использоваться в его шаблоне.
methods- функции для работы с событиями в основном, вроде.
Я не практикую доступ к данным делать через функции,тут ничего сказать не могу.
В не data,нельзя,vue именно в этом свойстве смотрит данные на наличие.

[hateyyyy]

А данные вы можете передавать как хотите,можете от родителя,можете напрямую в методе писать this.myquestions = .... ,можно сделать двухстороннее связывание данных,когда данные будут меняться в зависимости от содержимого элемента