vue3父传子+++父组件打开子组件

以下是一个Vue3父传子并打开子组件的例子：

父组件代码：

<template>
  <div>
    <button @click="showChild = true">打开子组件</button>
    <child :message="message" v-if="showChild" @close="showChild = false"></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello from parent',
      showChild: false
    }
  }
}
</script>

子组件代码：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在父组件中，我们定义了一个`showChild`变量来控制子组件的显示和隐藏。当点击“打开子组件”按钮时，`showChild`变量被设置为`true`，子组件被渲染出来。同时，我们将`message`变量作为属性传递给子组件。

在子组件中，我们定义了一个`message`属性来接收父组件传递的数据。当点击“关闭”按钮时，我们通过`$emit`方法触发一个名为“close”的事件，通知父组件关闭子组件。