vue3组件作为函数参数

Vue3 中的组件可以像函数一样作为参数传递。

以下是一个例子：

<template>
  <div>
    <button @click="showDialog">Show Dialog</button>
    <my-dialog v-if="show" @close="hideDialog"></my-dialog>
  </div>
</template>

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

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    showDialog() {
      this.show = true
    },
    hideDialog() {
      this.show = false
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为 `MyDialog` 的组件，并将其作为子组件引入到父组件中。然后在父组件的模板中，我们使用了一个按钮来触发 `showDialog` 方法，该方法会将 `show` 变量设为 true，从而显示 `MyDialog` 组件。

在 `MyDialog` 组件中，我们定义了一个 `close` 事件，并在父组件中监听该事件来隐藏 `MyDialog` 组件。

这种方式可以让我们更方便地使用组件，并且具有更高的灵活性。