javascript - 从子组件修改父数组是否有特定的后果？

Question

当 props 出现时，可以从子组件中修改父属性。是一个数组:

Vue.component('search-box', {
  template: '#search-box-template',
  props: ['who']
})
var vm = new Vue({
  el: '#root',
  data: {
    who: ['a', 'b']
  }
})

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>

<div id="root">
  who as seen by the parent: {{who}}
  <search-box v-bind:who="who"></search-box>
</div>

<template id="search-box-template">
    <div>
        who as seen by the child: {{who}}
    <button v-on:click="who.push('x')">modify who from within the child</button>
    </div>
</template>

除了从子项修改父项的预期操作(从风格上讲，这可能是一件坏事)——这样做是否会产生附带后果，即会破坏 Vue.js 的后果？

Answer 1

您不会通过破坏封装来“破坏 Vue”，这就是从组件外部更新组件的数据项。 docs说

it is also very important to keep the parent and the child asdecoupled as possible via a clearly-defined interface. This ensureseach component’s code can be written and reasoned about in relativeisolation, thus making them more maintainable and potentially easierto reuse.

这就是基本原理:这是很好的编程，而不是 Vue 无法处理的问题。