Question

我最近正在学习Vue，并且已阅读有关Vue components的文档。但是，我仍然不明白如何将数据对象传递给prop并将其呈现在组件模板中。

这是我的jsfiddle link

或在下面查看我的代码。

Vue.component('greeting', {
  template: `<h1>{{index}}</h1>`,
  props: ['persons']
});

var vm = new Vue({
  el: '#app',
  data: {
    persons: {
      'Mike': 'Software Developer',
      'Nikita': 'Administrator Assistant'
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <greeting v-bind:persons="persons" v-for="(value,key,index) in persons"></greeting>
</div>

Answer 1

几件事：

模板只能访问列出的道具，而不能访问父作用域中的东西，这就是index不可用的原因
您将绑定:person="value"，因为这是用persons的当前迭代项填充的变量
添加另一个道具“角色”，以便您可以将person对象的键绑定到它

参见下文：

Vue.component('greeting', {
  template: "<h1>{{person}} is a {{role}}</h1>",
  props: ['person', 'role']
});

var vm = new Vue({
  el: '#app',
  data: {
    persons: {
      'Mike': 'Software Developer',
      'Nikita': 'Administrator Assistant'
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <greeting :person="value" :role="key" v-for="(value, key, index) in persons" :key="index"></greeting>
</div>

如何将对象正确传递给vue组件？

1 个答案: