Vue插槽用法，在JSX中的用法

注意， $scopedSlots会包含$slots里面的内容，所以我们两个一起使用的时候，名字要不一样

• $scopedSlots 里面的属性值是函数，可以调用这个函数进行渲染，$scopedSlots会包含$slots
• $slots 里面的属性值是一个VNode

插槽

通过 this.$slots.xxx 可以直接访问插槽内容

Child.vue 子组件

<template>
  <div>
    
    <slot>slot>
    
    <slot name="footer">slot>
  div>
template>

jsx写法

export default {
  render() {
    return (
      <div>
        {/* 默认插槽 */}
        {this.$slots.default}

        {/* 具名插槽--footer */}
        {this.$slots.footer}
      </div>
    )
  }
}

Parent.vue 父组件

<template>
  <div>
    <Child>
      
      <div>这是默认插槽的内容啊div>

      
      <footer slot="footer">这是具名插槽的内容啊，footer>
    Child>
  div>
template>

jsx写法

export default {
  render(h) {
    return (
      <div>
        <Child>
          <div>这是默认插槽的内容啊</div>
          {/* 具名插槽 */}
          <footer slot="footer">这是具名插槽的内容啊，</footer>x
        </Child>
      </div>
    )
  },
}

作用域插槽

可以通过 this.$scopedSlots.xxx(传递的数据) 来渲染具体的组件

Child.vue 子组件

<template>
  
  <div>
    <header>
      
      <slot name="header" msg="具名作用域插槽--header">slot>
    header>

    <main>
      
      <slot msg="默认作用域插槽">slot>
    main>
    <footer>
      
      <slot name="footer" msg="具名作用域插槽--footer">slot>
    footer>
  div>
template>

jsx写法

export default {
  render() {
    return (
      <div>
        <header>{this.$scopedSlots.header?.({ msg: "具名作用域插槽--header" })}</header>
        <main>{this.$scopedSlots.header?.({ msg: "默认作用域插槽" })}</main>
        <footer>{this.$scopedSlots.footer?.({ msg: "具名作用域插槽--footer" })}</footer>
      </div>
    )
  },
}

Parent.vue 父组件

<template>
  <div>
    <Child>
      

      
      <template slot="header" slot-scope="{ msg }">
        <div>{{ msg }}div>
      template>

      
      <template #default="{ msg }">
        {{ msg }}
      template>

      
      <template v-slot:footer="{ msg }">
        {{ msg }}
      template>
    Child>
  div>
template>

jsx写法

export default {
  render() {
    return (
      <div>
        <Child
          scopedSlots={{
            header({ msg }) {
              return <div>{msg}</div>
            },
            default: (scoped) => {
              return scoped.msg
            },
            footer: ({ msg }) => {
              return msg
            },
          }}
        ></Child>
      </div>
    )
  }
}