Vue3 ＜script setup＞中局部引入组件，不渲染内容

在Vue3中，`<script setup>`语法允许我们将组件的逻辑抽取到单独的setup函数中，这使得代码更易于理解和组织。当你在`<script setup>`内引入并使用一个组件，例如：

<template>
  <div>
    <!-- 此处预期会渲染子组件的内容，但未显示 -->
    <child-component :props="someProps"></child-component>
  </div>
</template>

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

// 定义一些属性
const someProps = { keyProp: 'value' };

// 使用组件，但未绑定数据或触发渲染
const childInstance = new ChildComponent();
</script>

在这种情况下，`ChildComponent`并没有被正确地渲染出来，因为你在模板中只是简单地导入了它，并没有将其挂载到DOM上，也没有将`someProps`绑定给它。要在`<child-component>`中看到内容，你需要在`template`里显式地使用它，例如通过v-bind或ref，或者在`setup`里初始化组件实例并使用`setupContext.createElement()`挂载。