Vue3中如何将父作用域模板的属性值传递给嵌套子组件？

问题根源 #

<template #scope1 class='pretty'> 这种写法无效，因为<template>是虚拟插槽容器，不会被渲染为真实DOM，它的属性不会传递到组件层级；$attrs只能接收组件标签本身的属性，而非插槽模板的属性。

实现步骤 #

1. 修改App组件：向Component-A传递目标class值

把原本加在插槽模板上的class，改为通过属性传递给Component-A：

<template>
  <component-A :scope1-class="'pretty'">
    <template #default>
      <p>some unpretty text</p>
    </template>
    <template #scope1>
      <p>some text</p>
    </template>
  </component-A>
</template>

2. 改造Component-A：接收属性并传递给对应子组件

在Component-A中定义props接收class值，再绑定到对应的child-component上：

<template>
  <child-component>
    <slot name='default'></slot>
  </child-component>
  <!-- 将接收的class绑定到子组件 -->
  <child-component :class="scope1Class">
    <slot name='scope1'></slot>
  </child-component>
</template>

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

3. 子组件：绑定class到根元素

子组件的根div直接绑定接收的class（用$attrs.class即可自动获取子组件标签上的class属性）：

<template>
  <div :class="$attrs.class">
    <slot></slot>
  </div>
</template>

另一种灵活方案：插槽作用域传递 #

如果需要动态从插槽传递样式，可通过插槽作用域实现：

• Component-A中给插槽暴露传递class的方法：

<template>
  <child-component>
    <slot name='default'></slot>
  </child-component>
  <child-component :class="scope1Class">
    <slot name='scope1' :setClass="(cls) => scope1Class = cls"></slot>
  </child-component>
</template>

<script>
export default {
  data() {
    return {
      scope1Class: ''
    }
  }
}
</script>

• App组件中调用插槽方法传递class：

<template>
  <component-A>
    <template #default>
      <p>some unpretty text</p>
    </template>
    <template #scope1="{ setClass }" v-once>
      {{ setClass('pretty') }}
      <p>some text</p>
    </template>
  </component-A>
</template>

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