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 去申明处理这个事件. 代码如下:

子组件: