vue sync出錯怎麼辦

vue sync出錯的解決辦法：1、修改父元件傳過來的資料，程式碼如「<child-dialog :name.sync="userName"></child-Dialog>」；2、把需要傳遞的基本資料型別值放入物件中，程式碼如「<child-dialog :toChildObj="obj"></child-Dialog>」。

本教學操作環境：Windows10系統、Vue 3版、Dell G3電腦。

vue sync出錯怎麼辦？

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出錯怎麼辦的詳細內容，更多請關注TW511.COM其它相關文章！