.sync其实就是一个语法糖，是普通父子组件传值的一个简写
普通父子组件传值
//父组件
<template>
<div>
<div>我是父组件</div>
<child :visible="showChild" @taggleChild="hideChild"></child>
</div>
</template>
<script>
import child from "./child";
export default {
data() {
return {
showChild: true
};
},
methods: {
hideChild(val) {
this.showChild = val;
}
}
};
</script>
//子组件
<template>
<div @click="hideChild" v-show="visible">我是子组件</div>
</template>
<script>
export default {
props: ['visible'],
methods: {
hideChild() {
this.$emit('taggleChild',false);
}
}
};
</script>
使用.async
//父组件
<child :visible.sync="showChild"></child>
//子组件
<template>
<div @click="hideChild">我是子组件</div>
</template>
<script>
export default {
props: ['visible'],
methods: {
hideChild() {
this.$emit("update:visible",false);
}
}
};
</script>
等同与
//父组件
<child
:visible="showChild"
@update:visible="(val)=>{showChild=val}">
</child>
