Vue.js将项目中的项作为支柱传递给组件:我将修改支柱吗？

Question

对Vue.js来说是新手。在文档中，一个简单的示例是使用组件来呈现列表中的每个项，如下所示：

<todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

(资料来源：https://v2.vuejs.org/v2/guide/index.html#Composing-with-Components)

我的问题是:什么是正确的方式改变，例如，一个待办文本？请注意：I DO想要更改父数据，而可能的重复是人们不想更改父数据的情况。

我最初的想法是在组件模板中使用<input v-model="todo.text">。而且它是有效的。我觉得这很好，因为它更新了根组件data属性中的待办事项数组，这意味着我不需要编写一个事件就可以使更改的数据冒泡起来。

但有个问题。通过阅读组件中的文档，我看到了以下内容：

所有道具在子属性和父属性之间形成单向的向下绑定:当父属性更新时，它将向下流到子属性，而不是。--这可以防止子组件意外地变异父程序的状态，这会使应用程序的数据流更难推理。此外，每次更新父组件时，子组件中的所有道具都将使用最新值进行刷新。--这意味着您不应该尝试在子组件中突变一个道具。如果您这样做，Vue将在控制台中警告您。

如果我正确理解了这一点，我就不应该像以前那样改变todo文本，因为即使它很难工作，我也会在子组件中更改一个道具(因为每个todo都是通过一个支柱传递给子组件的)。

但文档清楚地指出，Vue会在控制台中警告我不要使用这种做法，但我没有看到任何警告。

另外，如果这不是一个最佳实践，我应该如何正确地更改要做的名称？

Answer 1

如果修改道具的成员，Vue不会注意到。它只会注意(和警告)如果你试图修改道具本身。

“它起作用”与“最佳做法”不一样。最佳实践是只有数据项的所有者才能修改它。这需要一定数量的额外编码才能发出和处理事件。您可能会认为这不值得付出额外的努力，而且大多数情况下不会对您造成伤害，特别是在简单的应用程序中。在一个复杂的应用程序中，您可能会发现，对于完全封装的组件，单元测试工作得更好。

下面的代码片段是一种无需自定义事件来处理它的方法:捕获本机change事件(如果您愿意，可以捕获本机input事件)。

​

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '<input :value="todo.text">'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [{
        id: 0,
        text: 'Vegetables'
      },
      {
        id: 1,
        text: 'Cheese'
      },
      {
        id: 2,
        text: 'Whatever else humans are supposed to eat'
      }
    ]
  },
  methods: {
    setText(item, event) {
      item.text = event;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app-7">
  <todo-item v-for="item in groceryList" :todo="item" :key="item.id" @change.native="setText(item, $event.target.value)">
  </todo-item>
  <div v-for="item in groceryList">
    {{item.text}}
  </div>
</div>

​