组件内部的组件VueJS

Question

我是VueJs的新手，但是我在以下方面遇到了麻烦（如果问题看起来很愚蠢，请提前打扰一下，但我还没有找到答案）：

var data = {
        info: [
            {
                brand: 'Samsung',
                model: 'A9834',
                color: 'black',
                id: 0
            },
            {
                brand: 'Nokia',
                model: 'Z9234',
                color: 'blue',
                id: 2
            }
        ]
    }

    Vue.component('list-group', {
        template: '<ul class="list-group"><list-group-item v-for="item in info" v-bind:key="item.id" v-bind:properties="item"></list-group-item></ul>'
    })

    Vue.component('list-group-item', {
                template: '<li class="list-group-item">{{properties.brand}}, {{properties.model}}, {{properties.color}}</li>',
                props: ['properties']
    })

    var instance = new Vue({
        el: '.app', 
        data: data
    })

我正在使用上面的代码片段执行的操作是在组件内部渲染组件。 我在控制台中收到的错误如下：

[Vue警告]：属性或方法“ info”未在实例上定义，但在渲染期间被引用。 通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。

正如你所看到的，我希望得到的是一个UI元素内部的两个li元素（2个元素，因为我循环data.info的V-的，和data.info有简单两个元素）; 但是相反我得到了上面的错误。 显然，我在知识方面缺少一些东西，但我不知道它是什么。 如果您能帮助我解决问题，我会非常感激。

提前致谢。

Answer 1

您的代码可以与props: ['info']配合使用props: ['info']
https://codepen.io/bsalex/project/editor/ApjgQd#

var data = {
  info: [
    {
      brand: "Samsung",
      model: "A9834",
      color: "black",
      id: 0
    },
    {
      brand: "Nokia",
      model: "Z9234",
      color: "blue",
      id: 2
    }
  ]
};

Vue.component("list-group", {
  props: ["info"],
  template:
    '<ul class="list-group"><list-group-item v-for="item in info" v-bind:key="item.id" v-bind:properties="item"></list-group-item></ul>'
});

Vue.component("list-group-item", {
  template:
    '<li class="list-group-item">{{properties.brand}}, {{properties.model}}, {{properties.color}}</li>',
  props: ["properties"]
});

var instance = new Vue({
  el: ".app",
  template: '<list-group :info="info">',
  data: data
});