.sync其實(shí)就是一個(gè)語(yǔ)法糖，是普通父子組件傳值的一個(gè)簡(jiǎn)寫(xiě)
普通父子組件傳值
//父組件
<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>
