本文主要介绍了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弹出的相关实现,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!