」;2、把需要傳遞的基本資料類型值放入物件中,程式碼如「
vue sync出錯的解決方法:1.修改父元件傳過來的數據,程式碼如「7775bc57efe62a2a8e3da8010688384bb8522385beb601be7cd27479a3f20ae7」; 2.把需要傳遞的基本資料型別值放入物件中,程式碼如「250240bd72f2d14ca1b5746de1662c35b8522385beb601be7cd27479a3f20ae7」。
本教學操作環境: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.js影片教學》
以上是vue sync出錯怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!