vue sync出錯怎麼辦

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

本教學操作環境：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(&#39;王五&#39;)">修改名字</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(&#39;王五&#39;)">修改名字</el-button>

export default {
props:{
toChildObj:{
type:Object,
default:{}
},
},
data(){
return{}
},
methods:{
changeName(newName){
//修改父组件传过来的数据
this.toChildObj.name = newName;
}
}
}

#推薦學習：《

vue.js影片教學》

以上是vue sync出錯怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！