组件库二次封装——透传问题

属性和事件透传

属性和事件的透传需要借助一个内置 api $attrs 。

<my-input a="1" b="2" @change="() => {}" />

<template>
  <div class="input-wrapper">
    输入框：<el-input v-bind="$attrs"></el-input>
  </div>
</template>

<script lang="ts">
export default {
  mounted() {
    console.log("attrs", this.$attrs)
  }
}
</script>

但是这样直接使用 $attrs 透传的优先级会比组件自身的属性和事件优先级低。比如：

<template>
  <div class="input-wrapper">
    输入框：<el-input v-bind="$attrs"></el-input>
  </div>
</template>

<script lang="ts">
export default {
  props: ['a'],
  emits: ['change'],
  mounted() {
    console.log("attrs", this.$attrs)
  }
}
</script>

插槽透传

一般我们需要透传插槽的话，需要：

  <my-input v-model="text" >
    <template #prepend>
      prepend
    </template>
    <template #append>
      append
    </template>
    <template #suffix>
      suffix
    </template>
    <template #prefix>
      prefix
    </template>
  </my-input>

<template>
  <div class="input-wrapper">
    输入框：
    <el-input v-bind="$attrs">
      <template #prepend>
        <slot name="prepend"></slot>
      </template>
      <template #append>
        <slot name="append"></slot>
      </template>
      <template #suffix>
        <slot name="suffix"></slot>
      </template>
      <template #prefix>
        <slot name="prefix"></slot>
      </template>
    </el-input>
  </div>
</template>

这样写有一些问题，一是繁琐，二是可能传递的插槽个数不同，导致不同的渲染逻辑（业务要求）。所以我们需要使用 $slots 这个 api。

插槽的本质是一个函数。

  <my-input v-model="text" >
    <template #prepend>
      prepend
    </template>
    <template #append>
      append
    </template>
  </my-input>

<template>
  <div class="input-wrapper">
    输入框：
    <el-input v-bind="$attrs">
      <template v-for="(_, name) in $slots" #[name]="scopedData">
        <slot :name="name" v-bind="scopedData"/>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts">
export default {
  mounted() {
    console.log("slots", this.$slots)
  }
}
</script>

ref 透传

在 vue 中 ref 是无法透传的，在 react 中可以通过 forwardRef 获取子组件。

所以我们只能将子组件内部的原组件库 ref 挂载到外部 二次封装的组件 ref 上。

<template>
  <div class="input-wrapper">
    输入框：
    <el-input ref="elInput" v-bind="$attrs">
      <template v-for="(_, name) in $slots" #[name]="scopedData">
        <slot :name="name" v-bind="scopedData"/>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log("elInput", this.$refs.elInput)
    for (const elInputKey in this.$refs.elInput) {
      this[elInputKey] = this.$refs.elInput[elInputKey];
    }
  }
}
</script>