Question

为什么key道具的值在子组件中为空？

Vue代码：

Vue.component('my-column',{
    props: ['items'],
    template: `
  <div>
    <my-row
      v-for="(item, index) in items"
      :item="item"
      :index="index"
      :key="item.id"
    ></my-row>
  </div>
  `,
})
Vue.component('my-row',{
    props: ['item', 'index', 'key'],
    template: `
     <div class="item--row">
       <p>{{ item.name }} {{ item.id }} - {{ key }}</p>
     </div>
  `
})
new Vue({
  el: '#app',
  data: function () {
    return {
      items: [
        { id: 0, name: 'one' },
        { id: 1, name: 'two' },
        { id: 2, name: 'three' },
      ]
    }
  },
})

HTML：

<div id="app">
  <my-column items="items"></my-column>
</div>

输出为：

one 0 -
two 1 -
three 2 -

预期输出：

one 0 - 0
two 1 - 1
three 2 - 2

Answer 1

这很可能是因为密钥已经是已注册的vue attribute。您必须将键重命名为其他名称才能使用它作为道具。 key属性用于告诉Vue对其进行优化以跟踪元素。

如果您不提供密钥，Vue将尽力重用看起来相似的代码。有时候这可能不是您想要的。这就是为什么我相信引入key的原因。

使用v-for时，为什么关键道具值不传播到子组件？

1 个答案: