Há alguns dias, quando olhei o código de outras pessoas, descobri o maravilhoso uso do modificador de sincronização e registrei seu uso e princípio da seguinte maneira.
No Vue, se um subcomponente deseja modificar as variáveis do componente pai, a abordagem geral é vincular eventos. O componente pai passa o método de modificação da variável para o subcomponente, e o subcomponente desencadeia a execução do método de modificação do variável. Este método é bastante satisfatório; além disso, uma maneira é usar o modificador de sincronização, que pode reduzir muito código.
Exemplo de código sem modificador de sincronização
Componente pai:
<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>Submontagem:
<template>
<div>
<button @click="changeFlag">点击</button>
</div>
</template>
<script>
export default {
name: "SyncDemo",
components: {},
props: ["show"],
methods: {
changeFlag() {
this.$emit("update", !this.show);
},
},
};
</script>
Clique no botão do componente filho para controlar a exibição e ocultação do componente pai "11111".
Usando o modificador de sincronização, o código será muito mais simples.
Exemplo de código usando modificador de sincronização
Componente pai:
<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>Submontagem:
<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>Você pode ver que depois de usar o modificador de sincronização, o componente pai não precisa passar métodos para os componentes filhos e o componente pai não precisa escrever métodos para modificar variáveis. Neste momento, clicar no botão do componente filho também pode controlar a exibição e ocultação de "11111" do componente pai.
O princípio do modificador de sincronização
Quando a sincronização não é usada, o evento de atualização vinculado ao componente filho no componente pai não passa parâmetros. Na verdade, o evento vinculado passa o parâmetro $event por padrão.
É importante notar aqui que se você estiver vinculando um evento nativo como clikc, $event se refere ao objeto de evento. Se for um evento personalizado, $event se refere aos parâmetros passados quando o subcomponente aciona o método. No exemplo acima , $ event refere-se à variável show.
Portanto, quando o modificador de sincronização não é usado, o código do componente pai pode ser transformado da seguinte forma (atribua $event diretamente à variável show, e o componente pai não precisa escrever outro método para modificar a variável):
<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>Vamos modificar ainda mais o código (especificar as variáveis a serem modificadas ao vincular o método):
<SyncDemo :show="show" @update:show="show = $event"></SyncDemo>O açúcar sintático para esta linha de código é usar o modificador de sincronização (o código se torna mais simples)
<SyncDemo :show.sync="show"></SyncDemo>
A descrição acima é uma evolução de código passo a passo e, finalmente, usamos o modificador de sincronização para modificar as variáveis do componente pai, para que possamos entender o princípio do modificador de sincronização.
Agora cole a explicação sobre modificadores de sincronização no site oficial do Vue:
