Vue3事件和插槽的实现原理

godfly
197 阅读1分钟

事件用法示例

Image.png

实现绑定事件：

        我们上篇实现setup的时候，会把组件实例上的props和一个上下文传给setup，我们现在就要把emit放到这个上下文对象里面

Image.png

  • vue3会把绑定的事件转成on开头

父组件帮在子组件上的事件会存在组件的props里

Image.png

  • 将emit传的事件名处理成on开头后，去组件实例上虚拟检点的props里找父级绑在本组件的事件
  • 如果能找到，就触发该事件，把emit传过来的所有参数传进去

插槽用法示例

Image.png

插槽实现

Image.png

  • 我们前面文章写创建虚拟dom的时候，虚拟节点的孩子要么是数组，要么是文本字符串，那么我们现在要新加一种类型，孩子可能也是一个对象，如果是一个对象，那么它就是插槽

初始化渲染组件的时候，给组件实例增加插槽属性，用于存放插槽内容

Image.png

我们在初始化组件属性后，也需要初始化插槽

Image.png

initSlots方法

Image.png

  • 取虚拟节点上的shapeFlag标识，判断是否是一个插槽
  • 如果是一个插槽，就把children存到组件实例上的slots属性上

在组件公共属性上增加$attrs属性，从组件实例上取slots

Image.png

最后一步，我们把emit和slots挂载到setup第二个参数的对象上

Image.png

至此，我们就完成了组件绑定事件和插槽的实现,如有收获，点个赞哟~

avatar
文章
阅读
粉丝