jsx的默认插槽、具名插槽、作用域插槽使用

目录：

默认插槽和具名插槽：

子组件：

<script>
export default {
  name: 'HellHome',
  render() {
    return (
      <div class="hello">
        <h1>默认插槽</h1>
        {this.$slots.default}
        <h1>具名插槽</h1>
        {this.$slots.mike}
      </div>
    )
  }
}
</script>

父组件：

<script>
import HellHome from '@/components/HellHome.vue'

export default {
  name: 'Home',
  components: {
    HellHome
  },
  render() {
    return (
      <div class="home">
        <HellHome>
          //默认插槽
          <div>kkk</div>
          //具名插槽
          <div slot='mike'>mike</div>
        </HellHome>
      </div>
    )
  },
}
</script>

效果：

作用域插槽：

子组件：

<script>
export default {
  name: 'HelloAbout',
  render() {
    return (
      <div class="hello">
        <h1>作用域插槽</h1>
        {this.$scopedSlots.person({ name: 'john', age: 65 })}
      </div>
    )
  }
}
</script>

父组件：

<script>
import HelloAbout from '@/components/HelloAbout.vue'

export default {
  name: 'About',
  components: {
    HelloAbout
  },
  render() {
    return (
      <div class="about">
        <HelloAbout scopedSlots={{
          person: props => {
            return (
              <div style='backgroundColor:orange'>
                {props.name}今年 {props.age}岁
              </div>
            );
          }
        }} ></HelloAbout>
      </div>
    )
  },
}
</script>

效果：