javascript - 访问组件内的数据变量

Question

我使用

创建了一个 Vue 存储库

vue init webpack my-app

现在，我的 main.js 是这样的 --

//使用 import 命令加载的 Vue 构建版本 //(仅运行时或独立)已在 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 文件具有 id 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>

在这里，我不断收到无法读取属性groceryList和未定义消息的错误。我已经阅读了 vue 的文档，根据它我没有犯任何错误。那么，这里有什么问题呢？

Answer 1

在 main.js 中，您应该将 data 声明为函数，并将 :message 传递给 App 组件

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声明为 Prop

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