请问像ant-design-vue，可以将组件属性使用<slot/>进行传参，这是怎么做到的？

Question

比如:

<drawer title="测试">

</drawer>

可以改写为：

<drawer>
    <template slot="title">
       测试
   </template>
</drawer>

组件属性可以全部使用<slot>插槽来写，在底层上是怎么实现的？

Answer 1

不是 “组件属性可以全部使用插槽来写”，而是恰好有个具名插槽和 prop 同名而已。

<script>
export default {
  props: {
    title: String
  }
}
</script>
<template>
  <div class="wrapper">
    <div class="header">
      <!-- 传 prop 了用 prop，没传用 slot -->
      <template v-if="title">{{ title }}</template>
      <slot v-else name="title"></slot>
    </div>
    <div class="body">
      <slot></slot>
    </div>
  </div>
</template>

当然你也可以写 JSX：

export default {
  setup(props, { slots }) {
    return (
      <div class="wrapper">
        <div class="header">
          {props.title ?? slots.title?.()}
        </div>
        <div class="body">
          {slots.default?.()}
        </div>
      </div>
    );
  }
}

Answer 2

https://cn.vuejs.org/guide/co...

Answer 3

就是具名插槽吧 https://cn.vuejs.org/guide/co...

我猜大概是这么实现的

// drawer.vue

<div class="title">
    <slot name="title">{{props.title}}</slot>
</div>