超简单版！！vue父组件响应式调用子组件

项目场景

父组件通过按钮控制子组件（弹窗dialog）的打开。
小项目的话，直接把dialog放到页面里面很方便，但规范一点的项目的话还是会把dialog抽离出来成为子组件，因此衍生出该场景。

思路

之前一直都采用父子组件同时维护两个变量，通过props和emit进行传值，从而控制两个dialog的开关，并且传值过去的变量是不可以改变的，因此这种方法使用起来很绕而且麻烦。
解决方法： 使用expose/ref，父组件调用子组件方法，只需维护子组件的变量即可。

子组件示例

<el-dialog v-model="dialogVisible"></el-dialog>

const dialogVisible = ref(false)
const open = () => {
  dialogVisible.value = true
}
// 声明抛出childName属性，open方法
defineExpose({
  childName: "这是子组件的属性",
  open
})

父组件示例

// 通过childContent获取子组件抛出的内容
<child ref="childContent">
<button @click="handle">按钮</button>

const content= ref()
const handle = () => {
  console.log(childContent.value.childName) //获取子组件对外暴露的属性
  childContent.value.open() //调用子组件对外暴露的方法
}

推荐一个总结的还不错的组件通信文档
组件通信