En regardant le code d'autres personnes il y a quelques jours, j'ai découvert la merveilleuse utilisation du modificateur de synchronisation, et j'ai enregistré son utilisation et son principe comme suit.
Dans Vue, si un sous-composant souhaite modifier les variables du composant parent, l'approche générale consiste à lier des événements. Le composant parent transmet la méthode de modification de la variable au sous-composant, et le sous-composant déclenche l'exécution de la méthode de modification de la variable. variable. Cette méthode est tout à fait satisfaisante, de plus, une solution consiste à utiliser le modificateur sync, ce qui peut réduire beaucoup de code.
Exemple de code sans modificateur de synchronisation
Composant parent :
<template>
<div>
<div v-if="show">11111</div>
<h3>下面是子组件</h3>
<SyncDemo :show="show" @update="update"></SyncDemo>
</div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
name: "Test",
components: { SyncDemo },
props: [],
data() {
return {
show: true,
};
},
methods: {
update(flag) {
this.show = flag;
},
},
};
</script>Sous-ensemble :
<template>
<div>
<button @click="changeFlag">点击</button>
</div>
</template>
<script>
export default {
name: "SyncDemo",
components: {},
props: ["show"],
methods: {
changeFlag() {
this.$emit("update", !this.show);
},
},
};
</script>
Cliquez sur le bouton du composant enfant pour contrôler l'affichage et le masquage du composant parent "11111".
En utilisant le modificateur sync, le code sera beaucoup plus simple.
Exemple de code utilisant le modificateur de synchronisation
Composant parent :
<template>
<div>
<div v-if="show">11111</div>
<h3>下面是子组件</h3>
<SyncDemo :show.sync="show"></SyncDemo>
</div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
name: "Test",
components: { SyncDemo },
props: [],
data() {
return {
show: true,
};
},
};
</script>Sous-ensemble :
<template>
<div>
<button @click="changeFlag">点击</button>
</div>
</template>
<script>
export default {
name: "SyncDemo",
components: {},
props: ["show"],
methods: {
changeFlag() {
this.$emit("update:show", !this.show);
},
},
};
</script>Vous pouvez voir qu'après avoir utilisé le modificateur de synchronisation, le composant parent n'a pas besoin de transmettre de méthodes aux composants enfants et le composant parent n'a pas besoin d'écrire des méthodes pour modifier les variables. A ce moment, cliquer sur le bouton du composant enfant peut également contrôler l'affichage et le masquage du "11111" du composant parent.
Le principe du modificateur de synchronisation
Lorsque la synchronisation n'est pas utilisée, l'événement update lié au composant enfant dans le composant parent ne transmet pas les paramètres. En fait, l'événement lié transmet le paramètre $event par défaut.
Il convient de noter ici que si vous liez un événement natif tel que clicc, $event fait référence à l'objet événement. S'il s'agit d'un événement personnalisé, $event fait référence aux paramètres passés lorsque le sous-composant déclenche la méthode. Dans l'exemple ci-dessus , $ événement fait référence à la variable show.
Par conséquent, lorsque le modificateur de synchronisation n'est pas utilisé, le code du composant parent peut être transformé comme suit (attribuez directement $event à la variable show, et le composant parent n'a pas besoin d'écrire une autre méthode pour modifier la variable) :
<template>
<div>
<div v-if="show">11111</div>
<h3>下面是子组件</h3>
<SyncDemo :show="show" @update="show = $event"></SyncDemo>
</div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
name: "Test",
components: { SyncDemo },
props: [],
data() {
return {
show: true,
};
},
};
</script>Modifions encore le code (précisons les variables à modifier lors de la liaison de la méthode) :
<SyncDemo :show="show" @update:show="show = $event"></SyncDemo>Le sucre syntaxique pour cette ligne de code est d'utiliser le modificateur sync (le code devient plus simple)
<SyncDemo :show.sync="show"></SyncDemo>
Ce qui précède est une évolution du code étape par étape, et enfin la variable du composant parent est modifiée à l'aide du modificateur sync, ce qui permet de comprendre le principe du modificateur sync.
Collez maintenant l'explication sur les modificateurs de synchronisation sur le site officiel de Vue :
