Vuejs：无法从另一个模板中的模板访问数据列表

Question

所以我有这个设置，它在表组件的 v-for 构造上崩溃。它显示一个错误：“属性或方法“tablesList”未在实例上定义，但在渲染期间被引用”。如果我省略 v-for table-component 渲染。如果我从“容器”组件访问这些数据，一切都很好。所以问题在于从父模板中的子模板访问数据。

我做错了什么？

let container = Vue.component("container", {
        props: ["item"],
        template: `<div class="container">

            <table-component v-for="item in tablesList"></table-component>
          </div>`
      });

let table = Vue.component("table-component", {
        props: ["item"],
        template: `<div class="table">
            this is a table
          </div>`
      });

      let app = new Vue({
        el: "#app",
        data() {
          return {
            containersList: [],
            tablesList: [{item:'item'}]
          };
        },
        methods: {
          anyMethod() {

          }
        }
      });
    </script>

Answer 1

你在container component中使用tablesList但是你在app中定义了它。

您需要在container 中添加tablesList，如下所示，

let container = Vue.component("container", {
    props: ["item"],
    data: () => {
       return {
          tablesList: [{item:'item'}]
       }
    },
    template: `<div class="container">
                <table-component v-for="item in tablesList"></table-component>
              </div>`
    });

注意：在使用v-for时使用v-bind:key。

Answer 2

需要在props中定义tablesList => https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props