Vue sync修饰符
Celester_best 人气:0前几天在看别人代码时，发现了sync修饰符的妙用，特记录其用法和原理如下。
不使用sync修饰符的代码示例
父组件：
<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>子组件：
<template>
<div>
<button @click="changeFlag">点击</button>
</div>
</template>
<script>
export default {
name: "SyncDemo",
components: {},
props: ["show"],
methods: {
changeFlag() {
this.$emit("update", !this.show);
},
},
};
</script>
点击子组件的按钮就可以控制父组件“11111”的显示与隐藏。
使用sync修饰符，代码就会简单很多。
使用sync修饰符的代码示例
父组件：
<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>子组件：
<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>可以看到使用sync修饰符之后，父组件就不需要向子组件传递方法，父组件也不需要特意写修改变量的方法了。此时点击子组件的按钮，一样可以控制父组件的“11111”的显示与隐藏。
sync修饰符的原理
在不使用sync时父组件中子组件绑定的update事件没有传递参数，其实绑定事件默认传递了$event参数。
这里值得注意的是如果绑定的是clikc等原生事件时，$event是指事件对象，如果是自定义事件，$event则指子组件触发该方法时传递的参数，在上面的例子中，$event则指show变量。
所以不使用sync修饰符时，父组件的代码可以改造成如下（直接将$event赋值给show变量，父组件不需要再另外写一个修改变量的方法）：
<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>我们再进一步修改代码（绑定方法时指明要修改的变量）：
<SyncDemo :show="show" @update:show="show = $event"></SyncDemo>
这行代码的语法糖的方式就是使用sync修饰符（代码变得更简单）
<SyncDemo :show.sync="show"></SyncDemo>
以上就是通过一步步代码演变，最后变成使用sync修饰符的方式修改父组件的变量，使我们明白了sync修饰符的原理。
现粘贴vue官网上关于sync修饰符的解释：
加载全部内容