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

成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商，擁有專(zhuān)業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù)，十載企業(yè)及個(gè)人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都千余家客戶(hù)提供網(wǎng)頁(yè)設(shè)計(jì)制作,網(wǎng)站開(kāi)發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，高端網(wǎng)站設(shè)計(jì)，同時(shí)也為不同行業(yè)的客戶(hù)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)建站。

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

Vue修飾符.sync（Avoid mutating a prop directly since .......報(bào)錯(cuò)的一種解決方案）

前言

我們都知道，子組件在修改父組件傳過(guò)來(lái)的props時(shí)會(huì)報(bào)錯(cuò)，如下圖

一、什么是.sync

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

二 .sync的使用

語(yǔ)法：

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

父組件

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

子組件

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

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

:name.sync修飾符其實(shí)是以下代碼的縮寫(xiě)
@update:name="val => name= val"

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

傳遞對(duì)象

把需要傳遞的基本數(shù)據(jù)類(lèi)型值放入對(duì)象中，子組件中修改對(duì)象中的值就不會(huì)報(bào)錯(cuò)了，原理是對(duì)象是復(fù)雜數(shù)據(jù)類(lèi)型，子組件接收到的對(duì)象和父組件傳遞的對(duì)象是共用一個(gè)內(nèi)存地址的，故可實(shí)現(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){
//修改父組件傳過(guò)來(lái)的數(shù)據(jù)
this.toChildObj.name = newName;
}
}
}

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

網(wǎng)頁(yè)標(biāo)題：vuesync出錯(cuò)如何解決
網(wǎng)頁(yè)URL：http://www.chinadenli.net/article14/gcsige.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、ChatGPT、全網(wǎng)營(yíng)銷(xiāo)推廣、軟件開(kāi)發(fā)、微信小程序、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)