vue子组件给父组件传递值，并显示父组件的el-dialog

可以通过在子组件中使用 `$emit` 方法向父组件传递值，并在父组件中监听该事件，在事件处理函数中修改父组件中控制 `el-dialog` 显示的变量。

在子组件中：

<template>
  <div>
    <button @click="showDialog">打开弹窗</button>
    <el-dialog v-model="dialogVisible">
      <div>弹窗内容</div>
      <button @click="closeDialog">关闭弹窗</button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showDialog() {
      // 显示弹窗
      this.dialogVisible = true
      // 向父组件传递值
      this.$emit('show-dialog', true)
    },
    closeDialog() {
      // 关闭弹窗
      this.dialogVisible = false
      // 向父组件传递值
      this.$emit('show-dialog', false)
    }
  }
}
</script>

在父组件中：

<template>
  <div>
    <!-- 监听子组件传递过来的事件 -->
    <child-component @show-dialog="handleShowDialog"></child-component>
    <el-dialog v-model="dialogVisible">
      <div>弹窗内容</div>
      <button @click="closeDialog">关闭弹窗</button>
    </el-dialog>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleShowDialog(visible) {
      // 修改控制 el-dialog 显示的变量
      this.dialogVisible = visible
    },
    closeDialog() {
      // 关闭弹窗
      this.dialogVisible = false
      // 向子组件传递值
      this.$refs.child.closeDialog()
    }
  }
}
</script>

在父组件中，使用 `@show-dialog` 监听子组件传递过来的事件，通过修改 `dialogVisible` 变量控制 `el-dialog` 是否显示。同时，在关闭 `el-dialog` 的按钮事件中，通过 `$refs` 获取子组件实例，调用子组件中的 `closeDialog` 方法，使子组件中的 `dialogVisible` 变量也被修改。