Доступ к переменной данных внутри компонента

Question

Я сделал хранилище Vue, используя

vue init webpack my-app

Теперь, мой main.js примерно такой -

// Версия сборки Vue для загрузки с помощью команды import // (только для времени выполнения или автономно) был установлен в webpack.base.conf с псевдонимом.

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.component('todo-item', {
  template: '<li>{{ todo }}</li>',
  props: ['todo']
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App :groceryList="groceryList"/>',
  data:{
    message: 'abcdefghi',
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

Мой App.vue файл имеет шаблон с идентификатором app, как указано в main.js

<template>
  <div id="app">
    At Parent: {{ groceryList[1].text }}
    <br/>
    <div>{{ message }}</div>
    <router-view/>
    <Table/>
    <Users/>

  </div>
</template>

<script>
import Users from './components/Users'
import Table from './components/Table'
export default {
  name: 'App',
  components: {
    Users,
    Table,
  },
}
</script>

Здесь я продолжаю получать сообщения об ошибках cannot read property groceryList and message of undefined. Я прочитал документацию vue и в соответствии с ней я не делаю никаких ошибок. Итак, в чем здесь проблема?

Answer 1

В main.js вы должны объявить data как функцию и передать :message компоненту приложения

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App :groceryList="groceryList" :message="message"/>',
  data () {
    return {
      message: 'abcdefghi',
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  }
})

и App.vue, вы должны объявить groceryList и message как реквизиты

<script>
import Users from './components/Users'
import Table from './components/Table'
export default {
  name: 'App',
  props: ['message', 'groceryList']
  components: {
    Users,
    Table,
  },
}
</script>