.sync是vue中用于实现简单的“双向绑定”的语法糖,在平时的开发中是经常使用的。
在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值,那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的show改变时,通过事件机制,修改父组件的show。完成了子组件show和父组件show的双向映射。
// 父级中调用子组件
<son :show.sync="show"></son>
//当子组件需要更新 show 的值时,它需要显式地触发一个更新事件:
this.$emit('update:show', false)
示例
//父组件
<template>
<div class="father">
<div>父组件</div>
<son :show.sync="show"></son>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import son from "../components/address";
export default {
data() {
return {
show: false, //地址组件显示隐藏
};
},
methods: {
changeValue() {
this.show = true;
},
},
mounted() {},
components: {
son,
},
};
</script>
//子组件
<template>
<div class="son" v-show="show">
<div>我是子组件</div>
<button @click="close">关闭</button>
</div>
</template>
<script>
export default {
props: ["show"],
methods: {
close() {
this.$emit('update:show', false)
},
},
};
</script>