Vue中的單向數(shù)據(jù)流原則詳解
Vue中的單向數(shù)據(jù)流原則
做一個 ElementUI 彈框組件的二次封裝
- 效果如下：
點擊取消按鈕發(fā)現(xiàn)彈出如下報錯信息
[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>出現(xiàn)這個錯誤的原因
是父子組件在進行通信時，子組件直接修改了 props的某個屬性的值。
在 Vue.js 中，直接修改 prop（屬性）的值是被嚴格禁止的，因為這會導致父子組件之間的數(shù)據(jù)流變得難以追蹤和調(diào)試。Vue 設計之初就采用了單向數(shù)據(jù)流的原則，即父組件通過 prop 向下傳遞數(shù)據(jù)到子組件，而子組件應該通過事件（如自定義事件）來通知父組件更新數(shù)據(jù)，而不是直接修改 prop 的值。
正確的寫法如下：
在子組件中取消按鈕的點擊事件中不修改 dialogVisible 屬性的值, 而是通過 $emit 發(fā)送一個自定義事件 dialog-close, 在父組件中使用 @dialog-close 去申明處理這個事件. 代碼如下:
- 子組件：
- 父組件：
總結
在 Vue.js 中，單向數(shù)據(jù)流（One-Way Data Flow）是一個重要的設計理念，指的是數(shù)據(jù)從父組件通過 props 向下傳遞給子組件，而子組件不能直接修改這些數(shù)據(jù)。
如果子組件需要修改數(shù)據(jù)，應該通過事件通知父組件，由父組件更新數(shù)據(jù)。這種機制確保了組件之間的關系清晰，易于維護。
相關文章
本篇文章主要介紹了Vue計算屬性的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
VueX瀏覽器刷新如何實現(xiàn)保存數(shù)據(jù)
這篇文章主要介紹了VueX瀏覽器刷新如何實現(xiàn)保存數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了vue結合vant實現(xiàn)聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實例代碼介紹的非常詳細,對大家學習或者使用elementUI具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
vue使用echarts如何實現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了Vue+Element使用富文本編輯器的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細介紹了Vue使用video標簽實現(xiàn)視頻播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
許多朋友想要材料上傳之后點擊預覽實現(xiàn)在瀏覽器上預覽的效果,所以本文將給大家介紹如何使用vue實現(xiàn)pdf預覽功能,文中有實現(xiàn)代碼,有需要的朋友可以參考閱讀下2023-08-08
Vue項目本地沒有問題但部署到服務器上提示錯誤(問題解決方案)
一個 VUE 的項目在本地部署沒有問題，但是部署到服務器上的時候提示訪問資源的錯誤，遇到這樣的問題如何解決呢？下面小編給大家?guī)砹薞ue項目本地沒有問題但部署到服務器上提示錯誤的解決方法，感興趣的朋友一起看看吧2023-05-05
這篇文章主要為大家詳細介紹了如何使用vue3.2 + elementPlus + pinia 實現(xiàn)多頁簽導航,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下2023-12-12