本文主要介绍了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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。