Que faire s'il y a une erreur dans la synchronisation de vue

Solution d'erreur de synchronisation Vue : 1. Modifiez les données transmises par le composant parent, le code est tel que "<child-dialog :name.sync="userName"></child-Dialog>" 2. Modifiez la valeur requise du type de données de base transmise dans l'objet, avec un code tel que "".

L'environnement d'exploitation de ce tutoriel : système Windows 10, Vue version 3, ordinateur Dell G3.

Que dois-je faire si la synchronisation des vues échoue ?

Vue modifier.sync (Évitez de muter un accessoire directement puisque... une solution au rapport d'erreurs)

Avant-propos

Nous savons tous que les composants enfants modifient les accessoires passés par le composant parent Une erreur sera signalée , comme indiqué ci-dessous

1. Qu'est-ce que .sync

Lorsque nous voulons modifier des données entre des composants parent-enfant, nous avons besoin d'une communication entre les composants parent-enfant, d'une communication parent-enfant : lier les données au composant enfant et alors le composant enfant utilise des accessoires pour le recevoir, lors du passage de l'enfant au parent, le composant parent doit lier les événements sur le composant, et le composant enfant utilise $emit pour transmettre l'événement, une telle modification des données est un peu difficile à écrire ; et le modificateur .sync est l'abréviation de plusieurs composants enfants pour modifier le composant parent. Comment écrire des données

2. Utilisation de .sync

Grammaire :

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

Composant parent

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

Composant enfant

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

.

3. Méthode de liaison bidirectionnelle d'autres accessoires

Passer l'objet

Passer ce qui doit être passé Si la valeur du type de données de base est mise dans l'objet, aucune erreur ne sera signalée lors de la modification de la valeur dans l'objet dans Le sous-composant.Le principe est que l'objet est un type de données complexe. L'objet reçu par le sous-composant et l'objet transmis par le composant parent partagent la même adresse mémoire. Par conséquent, l'effet de la liaison bidirectionnelle peut être. atteint.

Composant parent

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

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

Composant enfant

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

Apprentissage recommandé : "Tutoriel vidéo vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!