Question

我从Vue实例通过AJAX获取数据，我需要将这些数据传递给组件。我现在正在学习Vue.js是如何工作的，但我发现文档有点零碎......

以下是我的代码：

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>mysite</title>
</head>
<body>

<div id="app">
    <parent-component></parent-component>
</div>

<template id="parent-component-template">
    <div id="the-template">
        <div class="the-list">
            <span is="sector-item" v-for="item in sectors" :sector="item"></span>
        </div>
        <button>Button</button>
    </div>
</template>

<template id="sector-item-template">
    <span>
        {{ sector.name }}
    </span>
</template>

<!-- Vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>

<script>
    Vue.component('parent-component', {
        template: '#parent-component-template'
    });

    Vue.component('sector-item', {
        props: ['sector'],
        template: '#sector-item-template'  
    });

    let app = new Vue({
        el: '#app',
        data: {
            sectors: [{
                'id': 1,
                'name': 'Industry'
            }]
        }
    });
</script>

</body>
</html>

我收到以下错误：

[Vue warn]: Property or method "sectors" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

我在哪里犯错？

Answer 1

我认为您的代码不完整。我尝试在下面的片段中模拟你想要的东西：

Vue.component('parent-component', {
  props: ['sectors']
});

Vue.component('child-component', {
  props: ['item']
});

new Vue({
  el: '#app',
  data: {
    sectors: [
      {
        'id': 1,
        'name': 'Industry'
      },
      {
        'id': 2,
        'name': 'Education'
      }
    ]
  }
});

.the-list > div {
  padding: 5px;
  border: 1px solid gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>

<div id="app">
  <parent-component :sectors="sectors" inline-template>
    
    <div class="the-list">
      <child-component :item="sector" :key="sector.id" v-for="sector in sectors" inline-template>
        <div>
          <span v-text="item.name"></span>
          <button>Button</button>
        </div>
      </child-component>
    </div>
    
  </parent-component>
</div>

Vue实例拥有属性sectors，我将此属性作为prop传递给<parent-component>。

现在<parent-component>有一个名为sectors的支柱（可能是另一个名称），它从主Vue实例接收到sectors的值。我使用v-for迭代父组件prop 的所有项目，将数组的每个项目传递给<child-component>。

<child-component>有一个名为item的道具，我在其中传递了数组中每个元素的值。

您可以免费了解<{3}} 。

我希望这个答案可以提供帮助。

如何将数据从Vue实例传递给嵌套组件

1 个答案: