用过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("update:visible",false) 通过语法糖来实现modal弹框，可以让我们的代码更为简洁更为优雅，其用法在drawer里也是一样的这里就不一一阐述了
到此这篇关于vue利用sync语法糖实现modal弹框的项目实践的文章就介绍到这了,更多相关vue modal弹框内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！