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

Question

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

这是我的 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

一些事情:

• 模板只能访问列出的 props，而不能访问父作用域中的内容，这就是 index 不可用的原因
• 您将绑定(bind) :person="value"，因为这是用 persons 当前迭代项填充的变量
• 添加另一个属性“role”，以便您可以将 person 对象的键绑定(bind)到它

见下文:

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>