Vue3如何复用组件A模板，仅改脚本样式且不生成多余组件？

你可以通过直接复用组件A的模板并扩展其组件选项的方式实现需求，无需通过嵌套组件（<A></A>）的方式，这样就能避免创建额外的组件实例，消除性能开销。

方案一：使用defineOptions（Vue 3.3+ 推荐） #

Vue 3.3新增的defineOptions语法糖允许在<script setup>中直接定义组件选项，我们可以借此直接复用A的模板，并自定义脚本逻辑和样式：

<script setup>
import A from './A.vue'

// 复用组件A的模板
defineOptions({
  template: A.template
})

// 自定义setup逻辑，可覆盖或扩展A的原有逻辑
const customData = ref('这是自定义的数据')

// 如果需要保留A的props/methods等，可按需扩展
// 例如扩展props：
// defineProps({
//   ...A.props,
//   customProp: String
// })
</script>

<style scoped>
/* 自定义样式，可覆盖A的原有样式（注意scoped样式的优先级） */
.a-class {
  color: #f00;
}
</style>

方案二：手动导出组件选项（兼容Vue 3.3以下版本） #

如果你的项目使用Vue 3.3以下版本，可以放弃<script setup>语法糖，直接导出组件选项来复用A的模板：

<script>
import A from './A.vue'
import { ref } from 'vue'

export default {
  // 直接复用A的模板
  template: A.template,
  // 继承A的组件选项，再按需覆盖或扩展
  ...A,
  props: {
    ...A.props,
    // 添加自定义props
    customProp: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    // 自定义逻辑
    const customData = ref('自定义内容')
    // 若需保留A的setup逻辑，可调用A的setup并合并返回值
    const aSetupResult = A.setup(props)
    return {
      ...aSetupResult,
      customData
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
.custom-style {
  font-size: 16px;
}
</style>

关键说明 #

• 这种方式不会创建额外的组件实例，完全复用A的模板进行渲染，符合你减少组件数量的需求，也规避了官方提到的无渲染组件模式的性能开销。
• 组件A的模板会被当前组件直接使用，渲染出的DOM属于当前组件实例，样式可以通过scoped直接作用于这些DOM，无需额外处理样式隔离。
• 若需要保留A的原有逻辑（如props、methods、setup中的数据），只需在当前组件选项中合并A的对应选项即可。

内容的提问来源于stack exchange，提问作者ezegyfa