避免直接的prop突变会增加变量的重新声明

Question

我有一个对话框组件：

<div v-if="dialog">
    <p>Worlds smallest dialog</p>
    <button @click="dialog = false>Close Dialog</button> // Avoid mutating props directly...
</div>
//Instance options:
props: {
    dialog: {
        type: Boolean,
        default: false
    }

}

如果我想在父组件中使用它：

<button @click="dialog = true">Open Dialog</button>
<dialog :dialog="dialog"></dialog>
// Data object:
data: {
    dialog: false,
}

这是有效的，我的意思是应用程序不会崩溃。但是我被警告说，我应该声明一个数据/计算属性；这很奇怪，因为如果我想变异5-7个道具，对于它们中的每一个，我也必须在子组件上声明一个数据属性？如果父级有x，y，z数据道具，那么如果我想在子级上变异它们，子级也应该声明它们？我们不是在重复自己吗？我如何防止这种重复？

Answer 1

父级和子级都应该彼此独立地声明数据/道具。这样做的目的是分离每个组件的关注点。只有组件知道它实际需要什么。如果删除或向子级或父级添加属性，这两种实现都会发生变化，因为它们直接由数据/道具耦合。通过在两个组件中声明，更改一个不会立即破坏两个组件的API。

此外，直接注入组件的突变道具被认为是一种反模式，原因如下。从文档支柱突变中考虑这一点：

现在，在本地变异一个道具被认为是一种反模式，例如，声明一个道具，然后在组件中设置this.myProp='someOtherValue'。由于新的渲染机制，每当父组件重新渲染时，子组件的本地更改都将被覆盖。

Vue的咒语之一是“道具放下，事件上升”。事件不关心父母的实现，不管父母是否在听，它们都会触发。这进一步缓解了父级数据更改的情况，因为您也不必更改子级的道具来防止API崩溃。

在您的示例中，具有的子对话框

下面是一个对话框组件发出“关闭”事件且根本不需要使用道具的示例：

Vue.component('my-dialog', {
  template: `
    <div>
      <p>Worlds smallest dialog</p>
      <button @click="$emit('close')">
        Close Dialog
      </button>
    </div>
  `
})

new Vue({
  el: '#app',
  data() {
    return { dialog: false }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <button @click="dialog = true">Show Dialog</button>
  <my-dialog v-show="dialog" @close="dialog = false">
  </my-dialog>
</div>