vue組件傳遞對象中實現(xiàn)單向綁定的示例
更新時間：2018年02月28日 14:02:31 作者：shuaizi96
下面小編就為大家分享一篇vue組件傳遞對象中實現(xiàn)單向綁定的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
當使用vue組件時，組件之間經常需要傳遞數據，這里不討論傳遞一個字符串變量或者數字變量的情況，那些去看官方文檔就夠了，此處提出我在組件間傳遞對象時遇到的一個坑。
當組件間傳遞對象時，由于此對象的引用類型指向的都是一個地址，所以在子組件中修改對象的某個屬性值，父組件中的對象對應的屬性也會隨之改變，如果有這種雙向綁定的需要，那么這也算一種不錯的辦法，但如果不需要這種雙向綁定，那就要定義一個新的對象來復制原對象的屬性和值，坑就在這里，假如你普通的var、let 一個對象，例如：
computed: {
data: function () {
let obj={};
obj=this.message//this.message是父組件傳遞的對象
return obj
}
},
將data中各屬性分別綁定到輸入框中，并修改試試，你會發(fā)現(xiàn)父組件中對應的屬性值還是會改變，并沒有實現(xiàn)單向綁定的效果，這時就需要加一個方法了
computed: {
data: function () {
let obj=Object.assign({}, this.message);
return obj
}
},
這樣返回的data就是一個新的對象，并不會指向原對象的地址，所以再對其進行修改就不會對父組件中的對象造成影響了。
以上這篇vue組件傳遞對象中實現(xiàn)單向綁定的示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue.js中使用微信掃一掃解決invalid signature問題(完美解決)
這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問題(推薦),本文通過實例代碼給出解決方法，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
vue中el-cascader三級聯(lián)動懶加載回顯問題解決
本文主要介紹了vue中el-cascader三級聯(lián)動懶加載回顯問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
vue項目中有一些方法需要在多個頁面調用,但為了避免在每個頁面都import進來,可以把方法加到原型上去,這樣在每個組件中都能使用了,下面這篇文章主要給大家介紹了關于配置vue全局方法的兩種方式,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了解決VUE-Router 同一頁面第二次進入不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue實現(xiàn)點擊關注后及時更新列表功能，本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
本篇文章主要介紹了詳解vue 中使用 AJAX獲取數據的方法，在VUE開發(fā)時，數據可以使用jquery和vue-resource來獲取數據，有興趣的可以了解一下。2017-01-01
vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法
近嘗試上手 Vue3+TS+Vite,所以下面這篇文章主要給大家介紹了關于vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue和element上傳圖片以及進行拖拽圖片排序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue elementUI tree樹形控件獲取父節(jié)點ID的實例
今天小編就為大家分享一篇vue elementUI tree樹形控件獲取父節(jié)點ID的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Element樹形控件el-tree懶加載并設置默認展開和選中的效果
本文主要介紹了Element樹形控件el-tree懶加載并設置默認展開和選中的效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01