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