vue自定义弹窗组件,vue弹窗组件简单demo

vue自定义弹窗组件,vue弹窗组件简单demo,Vue弹窗的两种实现方式实例详解

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

vue自定义弹窗组件,vue弹窗组件简单demo