虽然我也使用了很久的vue，但是确实还是一个vue小菜鸡，只会写一些业务代码，对vue的源码知之甚少，当然，我也没有看过vue源码里面对插槽的实现，只是突然在看到别人写的源码里面有这个的一些使用。好像自己又更理解一点了

关于jsx

关于jsx,我知道在vue里面也是可以写jsx语法，甚至在公司里面，也见过有些代码使用jsx写的，一直想去做了解，但是自己太懒了，又不想学，所以一直耽搁下来了。这一次，我心血来潮，想看看vantUI的组件是怎么实现的，于是，就把vantUI的代码clone下来了。emmmm...好厉害的写法，vant里面的组件是用jsx语法写的，并且有很多高度封装的函数，正好我可以学习学习。

回归正题

也是一不小心，我看到了插槽，正好忘记了插槽怎么用，那就看看呗在jsx语法中，插槽就是一个函数

默认插槽

    <p>{slots.default && slots.default()}</p>

具名插槽

    <p>{slots.likeText && slots.likeText()}</p>

作用域插槽

 <p>{slots.likeContent && slots.likeContent({ like: 'like you' })}</p>

这么一看，插槽很简单嘛，我一看就会，哈哈哈哈哈哈哈。不过如果叫我自己造一个插槽出来，我还真不一定能写出来。。。从上面的代码一看，插槽其实就是一个函数，vue帮我们做的就是将插槽代码封装在函数中，然后通过调用这个函数，在组件中，展示代码。作用域插槽就是将需要的数据，通过函数入参的方式，将数据返回回去。还是用jsx的展示方式清晰。

最后展示一下我写的一点点

import { defineComponent, ref } from 'vue'
import './about.less'

export default defineComponent({
  name: 'AboutComp',
  props: {
    like: String,
  },
  // emits: ['changeLike'],
  setup(props, { slots, emit }) {
    const onClick = () => {}

    const dataVal = ref('data')

    const renderTitle = () => {
      return (
        <div class="title">
          <h1>About Component</h1>
        </div>
      )
    }
    return () => {
      return (
        <div>
          <NavBar title="like title" />
          {renderTitle()}
          <p>{slots.default && slots.default()}</p>
          <p>{slots.likeText && slots.likeText()}</p>
          <p>{slots.likeContent && slots.likeContent({ like: dataVal })}</p>
          <p onClick={onClick}>About Component</p>
        </div>
      )
    }
  },
})

总结

虽然这种写法在我们的业务中不经常用上，但是在学习内容方向上，还是有很大的参考价值的！当然，我也会继续学习下去，至少希望下次能够写出，vue源码里面怎么处理插槽的理解。加油！共勉！

关于在看vantUI库的时候，突然理解了插槽