Question

下面的示例是否违反了“单向数据流”原则？
子组件更改作为输入参数传递的数组“ todos”。
或者更确切地说，不是数组本身被修改（没有推送，没有拼接等），而是数组的每个元素。

我很感兴趣，因为documentation明确指出：

所有道具在子级属性和父级属性之间形成单向绑定：当父级属性更新时，它会向下流到子级，反之亦然。

<div id="app">
  <h2>Todos:</h2>
  <todo-list :todos="todos"/>
</div>

<script type="text/x-template" id="todo-list">
  <ol>
    <li v-for="todo in todos">
      <label>
        <input v-model="todo.done" type="checkbox">
        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</script>

<script type="text/javascript">
  Vue.component('todo-list', {
    template: '#todo-list',
    props: ['todos']
  })

  new Vue({
    el: "#app",
    data: {
      todos: [
        { text: "Learn JavaScript", done: false },
        { text: "Learn Vue", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  })
</script>

您对此有何看法？

提前谢谢！

Vue.js单向数据流

0 个答案: