」;2、把需要傳遞的基本資料類型值放入物件中,程式碼如「」。"/> 」;2、把需要傳遞的基本資料類型值放入物件中,程式碼如「」。">

首頁  >  文章  >  web前端  >  vue sync出錯怎麼辦

vue sync出錯怎麼辦

藏色散人
藏色散人原創
2022-12-26 16:25:082489瀏覽

vue sync出錯的解決方法:1.修改父元件傳過來的數據,程式碼如「7775bc57efe62a2a8e3da8010688384bb8522385beb601be7cd27479a3f20ae7」; 2.把需要傳遞的基本資料型別值放入物件中,程式碼如「250240bd72f2d14ca1b5746de1662c35b8522385beb601be7cd27479a3f20ae7」。

vue sync出錯怎麼辦

本教學操作環境: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(&#39;update:name&#39;, 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn