vue3父组件只展示ref传递过来的子组件

可以通过在父组件中使用 `ref` 来获取子组件实例，然后在父组件中通过 `v-if` 或者 `v-show` 来控制子组件的显示。

首先，在子组件中声明 `ref`，例如：

<template>
  <div>子组件内容</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  mounted() {
    this.$emit('child-mounted', this); // 发送子组件实例给父组件
  }
}
</script>

然后，在父组件中使用 `ref` 获取子组件实例，并在子组件渲染完成后通过 `emit` 事件将子组件实例传递给父组件：

<template>
  <div>
    <button @click="showChildComponent">显示子组件</button>
    <div v-if="childComponent" ref="childComponent"></div>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  data() {
    return {
      childComponent: null
    }
  },
  methods: {
    showChildComponent() {
      this.childComponent = this.$refs.childComponent;
    },
    handleChildMounted(childComponent) {
      this.childComponent = childComponent;
    }
  },
  mounted() {
    this.$on('child-mounted', this.handleChildMounted);
  }
}
</script>

在父组件的 `mounted` 生命周期钩子中，通过 `$on` 方法监听子组件的 `child-mounted` 事件，并在事件处理函数中将子组件实例保存到 `childComponent` 变量中。然后在 `showChildComponent` 方法中根据 `childComponent` 变量的值来判断是否显示子组件。

注意，这种方式只能展示一个子组件，如果有多个子组件需要展示，需要通过数组来保存子组件实例。