弹窗问题是前端开发在任何项目里面都会碰见的问题，今天主要是介绍在Vue框架里面如何手搓封装弹窗然后进行应用！

————————————

技术点：父子组件之间的通信交互。

方法一使用v-model

父组件代码：

父组件代码

子组件代码：

子组件代码

官方文档里有写，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。

model 选项可以用来避免这样的冲突，所以上面的子组件里，我们用balabala来替换掉了原本的input事件，所以在$emit的时候，里面的事件名应为balabala，否则默认为input.

————————————————

方法二使用.sync修饰符

element就是使用的这种方式，实现方式如下：

父组件代码：

父组件

子组件代码：

子组件

子组件是通过执行一个父子通信的方法this.$emit("update:show",false); 可以直接将父组件传过来的show值改变，从而达到显示隐藏的目的。

以上就是两种弹窗的实现方法，比较的简单；希望对大家有所帮助！

通信技术巴拉巴拉

本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.souzhinan.com/kj/293245.html

热点指南