主要通过$emit来触发父类事件，如：this.$emit('close-dialog');
然后在父类通过v-on来监听子类触发的事件，v-on:close-dialog="closeDialog" ,也可简写写成@close-dialog="closeDialog"
代码如下：
在v-dialog标签中添加@close-dialog="closeDialog"监听子组件触发的事件
<v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>
然后定义closeDialog函数修改showDialog 的状态
closeDialog:function(){//关闭对话框 this.showDialog = false; }
这样同样也需要注意的是监听函数closeDialog需要写成close-dialog形式
ok，以上我们就实现了一个对话框组件
写在后面
我们还可以使用slot来分发内容，这样可以用来混合父组件的内容与子组件自己的模板，从而实现组件的高度复用，使得组件更加灵活关于slot的用法可以查看文档https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容
完整代码已上传到github，地址https://github.com/fozero/front-awesome/blob/master/vue/components/dialog.html，欢迎star~,如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: