Vue 中单向数据流原则

做一个 ElementUI 弹框组件的二次封装

效果如下:

点击取消按钮发现弹出如下报错信息 :

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dialogVisible"

错误的写法:

子组件 MyDialog3.vue

<!-- 子组件 -->
<template>
  <!-- elmentui 的 Dialog -->
  <el-dialog :title=title
             :visible="dialogVisible">
    <span slot="footer" class="dialog-footer">
    <el-button @click="handleCancel">取 消</el-button>
    <el-button type="primary" @click="">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  name: "MyDialog3",
  props: ['title', 'dialogVisible'],
  methods: {
    handleCancel() {
      this.dialogVisible = false;     // 这是错误的写法, 不能在子组件中直接修改props的值
    }
  }
}
</script>

<style scoped>

</style>

父组件 MyDialog3Test.vue

<template>
  <div>
    <el-button @click="btnClick">点我弹框</el-button>
    <MyDialog3
        :title="headerText"
        :dialog-visible="dialogShow">
    </MyDialog3>
  </div>
</template>

<script>
import MyDialog3 from "@/components/dialog3/MyDialog3";

export default {
  name: "MyDialog3Test",
  components: {MyDialog3},
  data() {
    return {
      headerText: '测试弹框',
      dialogShow: false,
    }
  },
  methods: {
    btnClick() {
      this.dialogShow = true;
    }
  }
}
</script>

<style scoped>

</style>

出现这个错误的原因是 父子组件在进行通信时, 子组件直接修改了 props的某个属性的值. 

在 Vue.js 中，直接修改 prop（属性）的值是被严格禁止的，因为这会导致父子组件之间的数据流变得难以追踪和调试。Vue 设计之初就采用了单向数据流的原则，即父组件通过 prop 向下传递数据到子组件，而子组件应该通过事件（如自定义事件）来通知父组件更新数据，而不是直接修改 prop 的值。

正确的写法如下:

在子组件中取消按钮的点击事件中不修改  dialogVisible 属性的值, 而是通过 $emit 发送一个自定义事件 dialog-close, 在父组件中使用 @dialog-close 去申明处理这个事件. 代码如下:

子组件:

父组件: 

总结: 

在 Vue.js 中，单向数据流（One-Way Data Flow）是一个重要的设计理念，指的是数据从父组件通过 props 向下传递给子组件，而子组件不能直接修改这些数据。如果子组件需要修改数据，应该通过事件通知父组件，由父组件更新数据。这种机制确保了组件之间的关系清晰，易于维护。