Perkara yang perlu dilakukan jika terdapat ralat dalam penyegerakan vue

Penyelesaian kepada ralat penyegerakan vue: 1. Ubah suai data yang diluluskan oleh komponen induk, dengan kod seperti "<child-dialog :name.sync="userName"></child-Dialog> "; 2. Letakkan nilai jenis data asas yang perlu dipindahkan ke dalam objek, dengan kod seperti "".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue 3, komputer Dell G3.

Apakah yang perlu saya lakukan jika terdapat ralat dalam penyegerakan vue?

Vue modifier.sync (Elakkan memutasi prop secara langsung sejak .......Penyelesaian kepada ralat)

Kata Pengantar

Kita semua tahu bahawa komponen anak akan melaporkan ralat apabila mengubah suai prop yang diluluskan oleh komponen induk, seperti yang ditunjukkan di bawah

1 Apakah itu .sync

Apabila kita Apabila anda ingin mengubah suai data merentas komponen induk-anak, anda perlu berkomunikasi antara komponen induk dan anak: ikat data kepada komponen anak dan kemudian komponen anak menggunakan prop untuk menerimanya kepada induk, komponen induk perlu mengikat peristiwa pada komponen, dan komponen anak perlu mengikat peristiwa pada komponen Gunakan $emit untuk menghantar peristiwa pengubahsuaian data tersebut agak menyusahkan untuk menulis singkatan untuk subkomponen di atas untuk mengubah suai data komponen induk

2. Penggunaan .sync

Sintaks:

：props名称 . sync=“props值”
$emit( “ update：props名称 ” ,新值)

Ibu bapa. komponen

<child-dialog :name.sync="userName"></child-Dialog>

Komponen kanak-kanak

<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"

Kaedah ikatan dua hala lain untuk prop

Pemindahan object

Letakkan nilai jenis data asas yang perlu dihantar ke dalam objek, dan tiada ralat akan dilaporkan apabila mengubah suai nilai dalam objek dalam sub-komponen , prinsipnya ialah objek adalah kompleks jenis data, objek yang diterima oleh komponen anak dan objek yang diluluskan oleh komponen induk berkongsi alamat memori, jadi kesan ikatan dua hala boleh dicapai.

Komponen induk

<div>
<child-dialog :toChildObj="obj"></child-Dialog>
<p>
<span>名字：</span>{{name}}
</p>
</div>

export default {
data(){
return{
obj:{
name: "张三"
}
}
}
}

Komponen kanak-kanak

<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;
}
}
}

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Perkara yang perlu dilakukan jika terdapat ralat dalam penyegerakan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!