Cuando estaba mirando el código de otras personas hace unos días, descubrí el maravilloso uso del modificador de sincronización y registré su uso y principio de la siguiente manera.
En Vue, si un subcomponente quiere modificar las variables del componente principal, el método general es vincular eventos. El componente principal pasa el método de modificación de la variable al subcomponente, y el subcomponente activa la ejecución del método de modificación de la variable Este método es bastante satisfactorio, además, una forma es utilizar el modificador de sincronización, que puede reducir una gran cantidad de código.
Ejemplo de código sin modificador de sincronización
Componente principal:
<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>Subconjunto:
<template>
<div>
<button @click="changeFlag">点击</button>
</div>
</template>
<script>
export default {
name: "SyncDemo",
components: {},
props: ["show"],
methods: {
changeFlag() {
this.$emit("update", !this.show);
},
},
};
</script>
Haga clic en el botón del componente secundario para controlar la visualización y ocultación del componente principal "11111".
Usando el modificador de sincronización, el código será mucho más simple.
Ejemplo de código usando modificador de sincronización
Componente principal:
<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>Subconjunto:
<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>Puede ver que después de usar el modificador de sincronización, el componente principal no necesita pasar métodos a los componentes secundarios y el componente principal no necesita escribir métodos para modificar variables. En este momento, hacer clic en el botón del componente secundario también puede controlar la visualización y ocultación de "11111" del componente principal.
El principio del modificador de sincronización.
Cuando no se utiliza la sincronización, el evento de actualización vinculado al componente secundario en el componente principal no pasa parámetros. De hecho, el evento vinculado pasa el parámetro $ event de forma predeterminada.
Vale la pena señalar aquí que si está vinculando un evento nativo como clikc, $event se refiere al objeto del evento. Si es un evento personalizado, $event se refiere a los parámetros pasados cuando el subcomponente activa el método. En el ejemplo anterior , $ evento se refiere a la variable mostrar.
Por lo tanto, cuando no se utiliza el modificador de sincronización, el código del componente principal se puede transformar de la siguiente manera (asigne $ event directamente a la variable show y el componente principal no necesita escribir otro método para modificar 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>Modifiquemos aún más el código (especifique las variables que se modificarán al vincular el método):
<SyncDemo :show="show" @update:show="show = $event"></SyncDemo>El azúcar sintáctico para esta línea de código es usar el modificador de sincronización (el código se vuelve más simple)
<SyncDemo :show.sync="show"></SyncDemo>
Lo anterior es una evolución del código paso a paso. Finalmente, usamos el modificador de sincronización para modificar las variables del componente principal, de modo que comprendamos el principio del modificador de sincronización.
Ahora pegue la explicación sobre los modificadores de sincronización en el sitio web oficial de Vue:
