从子组件修改父数组是否有特定后果？答案

【问题标题】：Are there specific consequences of modifying a parent Array from a child component?从子组件修改父数组是否有特定后果？
【发布时间】：2017-11-09 18:39:52
【问题描述】：

当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？强>

【问题讨论】：

您可以从子级发出事件，监听父级并使用方法在父级中执行突变。
@wostex：是的，我知道父子组件之间的 prop/event 通信——我想知道我的问题中的操作是否会产生意想不到的后果。
@wostex 您将如何“发出”事件？我在这里错过了什么？
直接在您的孩子中更改道具是一种不好的做法，因为道具是从父级传递的，并且可以/将覆盖您的更改。这就是为什么通常的做法是改变父组件（保存此数据的组件）内的数据，以便更新的数据作为道具再次传递。
@Dellirium 文档示例：vuejs.org/v2/guide/components.html#Custom-Events

标签： javascript arrays pointers vue.js

【解决方案1】：

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

保持父母和孩子的关系也很重要通过明确定义的接口尽可能地解耦。这确保每个组件的代码都可以相对编写和推理隔离，从而使它们更易于维护并且可能更容易重复使用。

这就是理由：这是一种很好的编程，而不是 Vue 无法处理的问题。

【讨论】：