如何根据条件为v-slot插槽切换不同的父级包裹元素

你之前的操作不生效是因为title插槽的外层h5标签是定义在子组件内部的，你在父组件的插槽内容外层包裹h4，最终渲染的结构会是<h5><h4>插槽内容</h4></h5>，自然达不到替换外层标签的效果。

方案1：子组件新增prop动态控制标签类型（最推荐） #

该方案侵入性低，兼容原有所有调用场景，不需要修改其他现有调用代码：

1. 修改子组件代码，新增titleTag prop控制标题标签类型，默认值为h5，用动态组件<component>渲染外层标签：
   子组件模板：

<v-col cols="12">
  <component :is="titleTag" class="text-h5">
    <slot name="title" />
  </component>
</v-col>

子组件props定义：

props: {
  // 原有其他props保持不变
  titleTag: {
    type: String,
    default: 'h5'
  }
}

2. 父组件在需要使用h4的特定场景下，调用组件时传入对应prop即可：

<!-- 需要h4的场景调用写法 -->
<YourComponent :title-tag="'h4'">
  <template v-slot:title>
    {{ $t('title') }}
  </template>
</YourComponent>

方案2：无法修改子组件代码时的备选方案 #

如果没有权限修改子组件源代码，可根据需求选择对应处理方式：

• 仅需要样式和h4一致，不需要SEO语义：用深度选择器覆盖原有h5的样式即可

/* vue3深度选择器写法，vue2可替换为::v-deep或/deep/ */
:deep(.v-col h5.text-h5) {
  /* 填入h4对应的样式规则即可 */
  font-size: 2rem;
  font-weight: 500;
}

• 需要保留h4语义：可以在父组件挂载后通过DOM操作替换标签

// vue3 组合式API写法
import { onMounted } from 'vue'
onMounted(() => {
  // 替换成你组件对应的选择器
  const titleEl = document.querySelector('.your-component-wrapper .text-h5')
  if (titleEl && titleEl.tagName === 'H5') {
    const h4El = document.createElement('h4')
    h4El.className = titleEl.className
    h4El.innerHTML = titleEl.innerHTML
    titleEl.parentNode.replaceChild(h4El, titleEl)
  }
})

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