vue通过点击事件弹出弹窗页面

2023-06-26 18:36| 来源: 网络整理| 查看: 265

步骤一

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

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

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

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

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

【本文地址】

公司简介

联系我们