vue3源码分析——实现slots

引言

<<往期回顾>>

vue3源码分析——rollup打包monorepo
vue3源码分析——实现组件的挂载流程
vue3源码分析——实现props,emit，事件处理等

本期来实现， slot——插槽，分为普通插槽，具名插槽，作用域插槽，所有的源码请查看

正文

在模板中使用插槽的方式如下：

<todo-button>Add todo
</todo-button>
复制代码

在template中的内容最终会被complie成render函数，render函数里面会调用h函数转化成vnode，在vnode的使用方法如下：

render() {return h(TodoButton, {}, this.$slots.default)},
复制代码

看完slots的基本用法，一起来实现个slots,方便自己理解slots的原理哦！

vue3源码分析——实现slots相关推荐

Vue3源码分析之打包原理
Vue3源码分析之打包原理如果之前你已经看过我的<Vue3源码分析之入门>,那么你可以直接阅读此篇文章 Vue3源码分析之入门一.配置环境 1. 全局安装yarn Monorepo 管 ...
vue3源码分析——看看complier是怎么来解析的
引言 <<往期回顾>> vue3源码分析--手写diff算法 vue3源码分析--实现组件更新 vue3源码分析--解密nextTick的实现想知道vue3-complier ...
vue3源码分析--真的有必要掌握框架的细枝末节吗？
古人云:工欲善其事必先利其器,磨刀不误砍柴工.但是砍柴的人需要知道怎么制作刀吗? 注意:本文先分析要不要学源码,然后分析要不要掌握源码的每一个细枝末节(深究技术)!!! 为什么要学源码为了面试被迫学 ...
vue3 源码分析-运行流程分析
虚拟dom和代理可以参考其他博客,此博客介绍vue3运行流程.方便理解vue的运行流程. 一.初次渲染流程 const createApp = ((...args) => {const app ...
Vue3源码解析之入门
Vue3源码分析之入门本文主要是针对想自学Vue3之类的框架源码的,却不知道如何上手的小伙伴们~ Vue3源码GitHub地址 Vue3源码克隆路径 :git@github.com:vuejs/co ...
推荐 7 个 Vue2、Vue3 源码解密分析的开源项目
大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 1. 为什么要学习源码 ? 阅读优秀的代码的目的是让我们能够写出优秀的代码. 不给自己设限,不要让你周围人的技术上限成为你的上限.其 ...
Vue-vben-admin Vue3+TS Axios的封装源码分析
Vue-vben-admin Vue3+TS Axios的封装源码分析前言一.近期再用Vue3+TS 重构之前Vue2的项目,因此想着借鉴一下业界较为优秀的代码,在Git上面找了好久,经过同事推荐 ...
【报错】flink源码分析： has no more allocated slots与思考
文章目录一. 任务描述与一句话 1. 任务描述 2. 一句话二. 日志分析 1. 申请一个task manager 2. 大概3分钟后运行这个tm时,报资源找不到三. 源码分析与报错机制定位 1 ...
Python3.5源码分析-Dict概述
Python3源码分析本文环境python3.5.2. 参考书籍<<Python源码剖析>> python官网 Python3的Dict对象在生成d = {}和d['1'] ...

vue3源码分析——实现slots

引言

正文

vue3源码分析——实现slots相关推荐

最新文章

热门文章