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

Question

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

这是我的 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 的当前迭代项填充的变量
• 添加另一个prop，'role'，以便您可以将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>