vue如何通过点击事件弹出弹窗页面详解

 更新时间:2022年06月07日 09:31:08   作者:疯狂的小强呀  
弹窗是我们开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了关于vue如何通过点击事件弹出弹窗页面的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

步骤一

创建一个弹窗页面,我们给该页面命名为dialogComponent,弹窗页面中要设置以下内容:

<template>
<!--1.首先,弹窗页面中要有el-dialog组件即弹窗组件,我们把弹窗中的内容放在el-dialog组件中-->
<!--2.设置:visible.sync属性,动态绑定一个布尔值,通过这个属性来控制弹窗是否弹出-->
  <el-dialog title="弹窗" :visible.sync="detailVisible" width="35%">
    弹窗内容
  </el-dialog>
</template>

<script>
    export default {
        name: "dialogComponent",
        data(){
          return{
            detailVisible:false
          }
        },
      methods:{
      //3.定义一个init函数,通过设置detailVisible值为true来让弹窗弹出,这个函数会在父组件的方法中被调用
        init(data){
          this.detailVisible=true;
          //data是父组件弹窗传递过来的值,我们可以打印看看
          console.log(data);
        }
      }
    }
</script>

步骤二

在父组件中引入弹窗组件,并通过点击事件弹出弹窗,父组件主要设置以下内容:

<template>
	<!-- 6.定义一个点击事件-->
	<button @click="handleClick('父组件')">点击</button>
	<!-- 3.在页面中使用dialog-component组件-->
	<!-- 4.设置v-if语句,通过动态改变Visiable值用来控制弹窗是否弹出-->
	<!-- 5.设置ref属性,相当于唯一标识dialog-component组件-->
	<dialog-component v-if="Visiable" ref="dialog"></dialog-component>
</template>

<script>
//	1.引入弹窗组件dialogComponent
import dialogComponent from "./dialogComponent";
    export default {
    //  2.在components中注册dialogComponent组件
    	components:{
          dialogComponent
      },
        data(){
          return{
            Visible:false
          }
        },
      methods:{
      // 7.实现点击事件,点击事件一定要包含以下内容
      	handleClick(data){
          this.Visible=true;
          this.$nextTick(()=>{
          //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
          //init调用的是dialog-component组件里面的init方法
          //data是传递给弹窗页面的值
            this.$refs.dialog.init(data);
          })
        },
      }
    }
</script>

注:vue组件在定义的时候使用驼峰命名,但是在使用的时候要转化为短横线命名!

总结

到此这篇关于vue如何通过点击事件弹出弹窗页面的文章就介绍到这了,更多相关vue弹出弹窗页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中的router-view组件的使用教程

    vue中的router-view组件的使用教程

    这篇文章主要介绍了vue中的router-view组件的使用教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • 基于Vue的延迟加载插件vue-view-lazy

    基于Vue的延迟加载插件vue-view-lazy

    这篇文章主要介绍了基于Vue的延迟加载插件vue-view-lazy,可以使图片或者其他资源进入可视区域后加载,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vant 在vue-cli 4.x中按需加载操作

    Vant 在vue-cli 4.x中按需加载操作

    这篇文章主要介绍了Vant 在vue-cli 4.x中按需加载操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 使用Vue自定义数字键盘组件(体验度极好)

    使用Vue自定义数字键盘组件(体验度极好)

    最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 input 进行金额输入的话 体验很不好,于是自己动手写了一个使用Vue自定义数字键盘组件,具体实现代码大家参考下本文
    2017-12-12
  • vue使用elementui的el-menu的折叠菜单collapse示例详解

    vue使用elementui的el-menu的折叠菜单collapse示例详解

    这篇文章主要介绍了vue使用elementui的el-menu的折叠菜单collapse示例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • Vue加载json文件的方法简单示例

    Vue加载json文件的方法简单示例

    这篇文章主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • vue实现微信分享功能

    vue实现微信分享功能

    这篇文章主要介为大家详细绍了vue实现微信分享功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • vue将单页面改造成多页面应用的方法

    vue将单页面改造成多页面应用的方法

    最近领导交我一个项目是使用 vue-cli 搭建的单页面应用。下面小编通过本文给大家介绍vue将单页面改造成多页面应用的方法 ,感兴趣的朋友一起看看吧
    2018-11-11
  • 简化版的vue-router实现思路详解

    简化版的vue-router实现思路详解

    这篇文章主要介绍了简化版的vue-router,需要的朋友可以参考下
    2018-10-10
  • vue打包之后配置统一请求地址步骤详解

    vue打包之后配置统一请求地址步骤详解

    这篇文章主要为大家介绍了vue打包之后配置统一请求地址实现步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07

最新评论