Vue3控制模态框打开关闭的三种方法

有三种实现方法 

1.在父组件的子标签上绑定数据和方法

首先在父组件上定义一个值来控制   初始值给一个false 

 动态绑定在子标签上

  

给添加按钮注册一个点击事件

 点击之后修改定义的值为true

子组件接收值

在< el-dialog>内用 :modelValue去绑定这个值来控制显示隐藏

(这里不用 v-model是因为v-model是双向绑定会修改值 导致bug)

点击关闭 取消 确认 三个按钮的时候 触发事件

 在事件内去通知父组件修改 dialogVisible 的值

(这里的值传不传都可以 在父组件修改也可以)

 父组件接收传递的方法

 修改

  

2. 使用v-model绑定

整体思路和方法1类似 有最主要的区别就是在组件上绑定的是v-model

 这里可以看一下vue3官网

组件 v-model | Vue.js

方法2 比方法1 稍微简洁方便一点  但是还是比较繁琐   这里推荐用方法3

3. 使用ref

整体思路:   在子组件定义好值和方法 然后暴露给父组件去调用

1. 首先先用ref 定义一个方法 并且绑定在 el-dialog上

 2. 在子组件内定义一个打开的方法 

 

 3. 暴露给父组件

 4. 父组件先定义一个初始值 并且在组件上用 ref 绑定这个值

 5. 点击事件 在点击添加时触发 并在事件内去使用子组件的方法

 

 这样就实现了在父组件点击添加  子组件能实现关闭的功能