vue sync出錯如何解決

這篇文章主要講解了“vue sync出錯如何解決”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue sync出錯如何解決”吧！

vue sync出錯的解決辦法：1、修改父組件傳過來的數(shù)據(jù)，代碼如“<child-dialog :name.sync="userName"></child-Dialog>”；2、把需要傳遞的基本數(shù)據(jù)類型值放入對象中，代碼如“<child-dialog :toChildObj="obj"></child-Dialog>”。

Vue修飾符.sync（Avoid mutating a prop directly since .......報錯的一種解決方案）

前言

我們都知道，子組件在修改父組件傳過來的props時會報錯，如下圖

一、什么是.sync

當(dāng)我們跨父子組件想要修改數(shù)據(jù)時，需要父子組件通訊，父傳子 ：在子組件綁定數(shù)據(jù)然后子組件用props接收，而子傳父，則是父組件需要在組件上綁定事件，子組件使用$emit傳遞事件；這樣的數(shù)據(jù)修改寫起來顯得有些麻煩，.sync這個修飾符就是一個縮寫以上子組件修改父組件數(shù)據(jù)的寫法

二 .sync的使用

語法：

：props名稱 . sync=“props值”
$emit( “ update：props名稱 ” ,新值)

父組件

<child-dialog :name.sync="userName"></child-Dialog>

子組件

<el-button type="primary" @click="changeName('王五')">修改名字</el-button>

methods:{
changeName(newName){
//修改父組件傳過來的數(shù)據(jù)
this.$emit('update:name', newName)
}
}

:name.sync修飾符其實是以下代碼的縮寫
@update:name="val => name= val"

三、其他 props雙向邦定的方法

傳遞對象

把需要傳遞的基本數(shù)據(jù)類型值放入對象中，子組件中修改對象中的值就不會報錯了，原理是對象是復(fù)雜數(shù)據(jù)類型，子組件接收到的對象和父組件傳遞的對象是共用一個內(nèi)存地址的，故可實現(xiàn)雙向邦定的效果。

父組件

<div>
<child-dialog :toChildObj="obj"></child-Dialog>
<p>
<span>名字：</span>{{name}}
</p>
</div>

export default {
data(){
return{
obj:{
name: "張三"
}
}
}
}

子組件

<el-button type="primary" @click="changeName('王五')">修改名字</el-button>

export default {
props:{
toChildObj:{
type:Object,
default:{}
},
},
data(){
return{}
},
methods:{
changeName(newName){
//修改父組件傳過來的數(shù)據(jù)
this.toChildObj.name = newName;
}
}
}

感謝各位的閱讀，以上就是“vue sync出錯如何解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue sync出錯如何解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！