vue3父组件点击触发子组件的弹框

在Vue 3中，父组件可以通过`ref`和`teleport`来访问子组件的方法和属性，并将子组件的内容渲染到父组件的DOM结构中。因此，我们可以在父组件中触发一个事件，并通过`ref`和`teleport`来调用子组件的方法来显示弹框。以下是一个示例：

假设我们有一个名为`child`的子组件，它包含一个弹框。当父组件的按钮被点击时，它将触发一个事件，并通过`ref`和`teleport`来调用子组件的方法来显示弹框。

子组件的代码如下所示：

<template>
  <teleport to="body">
    <div v-if="showDialog">
      Hello from child!
    </div>
  </teleport>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const showDialog = ref(false)

    const openDialog = () => {
      showDialog.value = true
    }

    return {
      showDialog,
      openDialog
    }
  }
}
</script>

在这里，我们使用了`teleport`来将子组件的内容渲染到父组件的DOM结构中。弹框的显示状态由`showDialog`变量控制。我们还定义了一个`openDialog`方法，用于在父组件中调用以显示弹框。

现在，让我们看看如何在父组件中触发该方法。父组件的代码如下所示：

<template>
  <div>
    <button @click="openChildDialog">Click me</button>
    <div ref="child"></div>
  </div>
</template>

<script>
import { ref } from 'vue'
import child from '@/components/child.vue'

export default {
  components: {
    child
  },
  setup() {
    const childRef = ref(null)

    const openChildDialog = () => {
      childRef.value.openDialog()
    }

    return {
      childRef,
      openChildDialog
    }
  }
}
</script>

在这里，我们使用了`ref`来访问子组件的内容，并将其注册为`childRef`的引用。我们还定义了一个`openChildDialog`方法，用于在子组件中调用子组件的`openDialog`方法。在这个方法中，我们使用`ref`属性来访问子组件并调用其方法。

需要注意的是，我们需要将子组件的内容放在一个`div`标签中，并将其注册为`childRef`的引用。这是为了使`teleport`能够正确地将子组件的内容渲染到父组件的DOM结构中。

所以，这就是如何在Vue 3中让父组件点击触发子组件的弹框的简单示例。