Vue中的单向数据流原则详解
作者：Hejjon
这篇文章主要介绍了Vue中的单向数据流原则,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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 向下传递给子组件，而子组件不能直接修改这些数据。
如果子组件需要修改数据，应该通过事件通知父组件，由父组件更新数据。这种机制确保了组件之间的关系清晰，易于维护。