本文主要介绍了Vue弹出窗口的两种实现方法，一种是使用。同步修改器，另一个使用垂直模型。本文通过示例代码非常详细的为大家介绍，有需要的朋友可以参考一下。
目录
一个人使用的方法。同步修改器和方法二使用v模型。
方法一 使用.sync修饰符
元素就是这样使用的，它的实现如下：
父组件：
模板
div id='demo '
测试模型：show . sync=' show flag '/test-model
/div
/模板
脚本
从“src/components/testModel”导入测试模型
导出默认值{
data(){
返回{
showFlag: false
}
},
组件：{
测试模型，
}
}
/脚本
style lang='scss '范围
/风格
子组件：
模板
div v-if='show '
button @ click=' close show '/按钮
/div
/模板
脚本
导出默认值{
data(){
返回{
}
},
道具：['秀']，
方法：{
closeShow() {
这个。$emit('update:show '，false)；
}
},
}
/脚本
style lang='scss '范围
/风格
子组件通过这个。$emit('update:show '，false)；可以直接改变父组件传递的显示值，从而达到显示和隐藏的目的。
方法二 使用v-model
父组件
模板
div id='demo '
测试模型v-model=' show '/测试模型
/div
/模板
脚本
从“src/components/testModel”导入测试模型
导出默认值{
data(){
返回{
显示：假
}
},
组件：{
测试模型，
}
}
/脚本
style lang='scss '范围
/风格
组件
模板
div v-if='value '
button @ click=' close show '/按钮
/div
/模板
脚本
导出默认值{
data(){
返回{
}
},
道具：['值']，
型号：{
属性：“值”，
事件：“balabala”
},
方法：{
changeShow() {
这个。$emit('balabala '，false)；
}
},
}
/脚本
style lang='scss '范围
/风格
公文里有文字。默认情况下，组件上v-model将使用适当的命名值和事件命名输入。但是，单选按钮框和复选框等输入控件可能会将值功能用于不同的目的。可以使用model选项来避免这样的冲突，所以在上面的子组件中，我们用balabala来替换原来的输入事件，所以$emit的时候，里面的事件名应该是balabala，否则默认输入。
关于vue弹出的两种实现的这篇文章到此为止。更多Vue弹出的相关实现，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。