vue点击按钮弹出新vue,vue页面弹出一个vue页面
弹出窗口是我们在开发中经常遇到的一个功能。下面文章主要介绍vue如何通过点击事件弹出弹窗页面的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
步骤1和步骤2的摘要
步骤一
创建一个弹出页面，我们将其命名为dialogComponent，并在弹出页面中设置以下内容：
模板
！-1.首先，弹出页面要有el-dialog组件，也就是弹出组件。我们将弹出窗口的内容放在el-dialog组件中
！-2.Set: visible.sync属性，动态绑定一个布尔值，通过该属性控制弹出窗口是否弹出-
El-dialog title= popup window :visible . sync= detail visible width= 35%
弹出内容
/el-dialog
/模板
脚本
导出默认值{
名称：对话框组件，
data(){
返回{
细节可见：假
}
},
方法：{
//3.定义一个init函数，通过将detailVisible的值设置为true来弹出窗口。这个函数将在父组件的方法中调用。
初始化(数据){
this.detailVisible=true
//data是父组件的弹出窗口传递的值。我们可以打印出来看看。
console.log(数据)；
}
}
}
/脚本
步骤二
弹出组件引入父组件，点击事件弹出弹出窗口。父组件主要设置以下内容：
模板
！-6.定义一个点击事件-
按钮@click=handleClick(父组件) Click /button
！-3.使用页面中的对话框组件组件-
！-4.设置v-if语句，通过动态改变Visiable值来控制弹出窗口是否弹出-
！-5.设置ref属性，相当于唯一标识对话框组件组件-
对话框组件v-if= visible ref= dialog /对话框组件
/模板
脚本
//1.介绍弹出窗口组件的dialogComponent。
从“”导入dialogComponent。/dialog component ；
导出默认值{
//2.在组件中注册对话框组件
组件：{
对话组件
},
data(){
返回{
可见：假
}
},
方法：{
//7.要实现click事件，click事件必须包含以下内容
handleClick(数据){
这个。可见=真；
这个。$nextTick(()={
//这里的对话框与上面的dialog-component组件中的ref属性值一致。
//init调用对话框组件组件中的init方法
//data是传递给弹出页面的值。
这个。$ refs . dialog . init(data)；
})
},
}
}
/脚本
注意：vue组件在定义时以驼峰命名，但使用时要转换成短横线！
总结
关于vue如何通过点击事件弹出弹出页面的这篇文章到此结束。有关vue弹出页面的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。