避免直接道具突变会增加变量的重声明

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破坏。

在您的示例中，具有<button>的子对话框不应该直接设置对话框是否可见。它应该将一个事件传播到父组件，并告诉父组件“单击了关闭按钮，请按照您的意愿考虑”。然后，父级应该决定是否将dialog支柱设置为false。

下面是一个示例，在这个示例中，对话框组件发出一个“关闭”事件，根本不需要接受一个道具：

​

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>

​