溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue sync出錯如何解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue sync出錯如何解決”吧！
vue sync出錯的解決辦法：1、修改父組件傳過來的數據，代碼如“<child-dialog :name.sync="userName"></child-Dialog>”；2、把需要傳遞的基本數據類型值放入對象中，代碼如“<child-dialog :toChildObj="obj"></child-Dialog>”。
Vue修飾符.sync（Avoid mutating a prop directly since .......報錯的一種解決方案）
前言
我們都知道，子組件在修改父組件傳過來的props時會報錯，如下圖
一、什么是.sync
當我們跨父子組件想要修改數據時，需要父子組件通訊，父傳子 ：在子組件綁定數據然后子組件用props接收，而子傳父，則是父組件需要在組件上綁定事件，子組件使用$emit傳遞事件；這樣的數據修改寫起來顯得有些麻煩，.sync這個修飾符就是一個縮寫以上子組件修改父組件數據的寫法
二 .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){
//修改父組件傳過來的數據
this.$emit('update:name', newName)
}
}:name.sync修飾符其實是以下代碼的縮寫
@update:name="val => name= val"
三、其他 props雙向邦定的方法
傳遞對象
把需要傳遞的基本數據類型值放入對象中，子組件中修改對象中的值就不會報錯了，原理是對象是復雜數據類型，子組件接收到的對象和父組件傳遞的對象是共用一個內存地址的，故可實現雙向邦定的效果。
父組件
<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){
//修改父組件傳過來的數據
this.toChildObj.name = newName;
}
}
}
感謝各位的閱讀，以上就是“vue sync出錯如何解決”的內容了，經過本文的學習后，相信大家對vue sync出錯如何解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
