用过vue的开发者都知道vue是组件化开发的一个框架,基于组件化的原则,很多时候我们开发的时候都会把像modal、drawer这种弹框,抽屉类的组件作为一个单独的组件分出去,然后在在用到的页面引入进来这个时候就涉及到了visible 属性的父子组件的通信,我们常规的做法可以通过props,$emit的方式进行通信,但vue其实提供了一种更为优雅的实现方式,可以通过sync的语法糖来实现。 具体代码如下 父组件代码
<div class="flex">
<a-button @click="openModal">打开Modal弹框</a-button>
<DemoModal :visible.sync="visible" />
</div>
</template>
<script>
import DemoModal from './demoModal.vue'
export default {
components: {
DemoModal,
},
data() {
return {
visible: false,
}
},
methods: {
openModal() {
this.visible = true
},
},
}
</script>
<style >
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
子组件代码
<a-modal
title="弹框"
:visible="visible"
@ok="handleSubmit"
@cancel="handleCancel"
>
</a-modal>
</template>
<script>
export default {
name:"DemoModal",
props:{
visible:{
type:Boolean,
default:false
}
},
methods:{
handleCancel(){
this.$emit("update:visible",false)
}
}
}
</script>
效果图
下面简单说一下sync语法糖的原理 其实原理也是基于props emit,只不过语法糖会帮我们做一些事,父组件里:visible.sync=”visible”会被扩展成:visible=”visible”@upate:visible=”value=>visible=value”其中value是子组件传过来的参数,这也就是为什么子组件关闭的时候要用这个写法this.emit,只不过语法糖会帮我们做一些事,父组件里:visible.sync=”visible”会被扩展成 :visible=”visible” @upate:visible=”value=>visible=value” 其中value是子组件传过来的参数,这也就是为什么子组件关闭的时候要用这个写法 this.emit(“update:visible”,false) 通过语法糖来实现modal弹框,可以让我们的代码更为简洁更为优雅,其用法在drawer里也是一样的这里就不一一阐述了