建站动态
根据您的个性需求进行定制 先人一步 抢占小程序红利时代
Vue.slot原理及slot是如何实现的
本篇内容介绍了“Vue.slot原理及slot是如何实现的”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
成都创新互联长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为河津企业提供专业的做网站、成都做网站，河津网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
一、回顾 slot 用法
1. 默认插槽
默认插槽
页面展示效果如图：
2. 具名插槽
接着上述的案例，添加具名插槽 header ，代码如下：
header 具名插槽
默认插槽
如上代码块可以发现：
页面展示效果如图：
3. 作用域插槽（slot-scope）
再接着上述案例，添加作用域插槽 footer ，代码如下
header 具名插槽
默认插槽
footer 具名 + 作用域插槽
{{ slotProps.footerInfo.text }}
如上代码块可以发现：
页面展示效果如图：
好了，简单回顾完用法后，笔者在这里先提三个问题：
普通插槽、 作用域插槽 的 vNode 是在哪个环节生成的，render 父组件时还是子组件时？
作用域插槽 为什么能在父组件访问到子组件的数据？
普通插槽 跟 作用域插槽 在实现上有区别吗？
我们带着疑问接着往下看！
二、不同slot的编译区别
我们根据上述最终的案例代码，执行一下打包命令，看看 Vue 在编译模板的时候，是怎么处理我们的 slot 的！事不宜迟，赶紧 build 一哈～（偷偷告诉大?，Vue 处理 作用域插槽跟 普通插槽的差异就是从编译开始的，也就是 render函数 会有所不同）
这里笔者顺便使用 v2.5 的具名插槽写法给大?参照一下（对具名插槽header做改写，使用 slot="header" 的写法），大家可以看下 v2.6、v2.5 具名插槽的 写法、实现 上的区别～反正也不难，也就顺便带出来看看了
上图左边是 v2.6 、右边是 v2.5 的，这里，我们集中关注：
其实根据上述编译后的结果，我们不妨这样猜测：
这里放出具体的 作用域插槽打包后代码，大家一看就很清晰了：
{
scopedSlots: t._u([
{
key: "footer",
// 函数接收了一个参数n
fn: function (n) {
return [
// h2 标签的 render 函数
e("h2", [t._v("footer 具名 + 作用域插槽")]),
// p 标签的 render 函数，这里可以看到编译后是：n.footerInfo.text
e("p", [t._v(t._s(n.footerInfo.text))])
]
}
}
])
}三、slot实现原理
1. 断点调试
为了方便大家看调试结果，当前项目的组件结构主要是这样，有三大层：
Vue ->
这里笔者在运行时代码 initRender()、renderSlot() 中，打上 debugger，直接带大火看看执行流程。这里简单介绍下两个方法：
接下来直接看实验截图：
1、先是进入initRender()（这里跳过初始化 大Vue、App 的过程）。直接到初始化 my-slot组件 过程。【 简单解释：由于 App组件 执行 render 得到 App组件vNode，在 patch 过程中 遇到 vue-component-my-slot 的 vNode ，又执行 my-slot组件 的 初始化流程。】
2、再是进入 renderSlot()。接着上面继续单步执行，会走到 renderSlot 中。这时候，已经进入到 my-slot组件 的 render 阶段了。回顾第一步中，此时我们手握 默认插槽的vNode，并存在 vm.$slot.default 中
header插槽
默认插槽
作用域插槽
2. 总结插槽实现原理
其实上面的流程只是论证过程，大家不可以不必深陷其中。笔者在这里直接根据实践过程，给大伙总结出结论！也就是要回到我们一开始的三个问题！
1、普通插槽、 作用域插槽 的 vNode 是在哪个环节生成的，render 父组件时还是子组件时？
默认插槽，不管 v2.5 、 v2.6 的写法，都是在 父组件中生成 vNode。vNode 存在 vm.$slot 中。待子组件 render 到插槽时，会直接拿到 父组件的 vNode
具名插槽两个版本情况不一。根据编译结果可知：
作用域插槽。不管版本，都是在子组件中进行render的。
大家不妨这么理解，模版编译后，只要是被放在 scopeSlots属性中的插槽，都会在子组件执行 render 的时候才会去生成vNode。
2、作用域插槽 为什么能在父组件访问到子组件的数据？
3、普通插槽 跟 作用域插槽 在实现上有区别吗？
有区别。
普通插槽。如果是 v2.5 ，具名插槽 和 默认插槽 都只在 父组件 render 的时候生成 vNode，子组件要 渲染slot 的时候，直接在父组件实例的 $slot 中获取已经是vNode的数据。
普通插槽。如果是 v2.6 ，具名插槽 虽然是在子组件中执行的 render，但是其不接收参数。
作用域插槽。不管 v2.5 还是 v2.6，都只在 子组件执行 render，并且能接收参数。
“Vue.slot原理及slot是如何实现的”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
本文标题：Vue.slot原理及slot是如何实现的
浏览路径：http://www.tsicrk.com/article/jcsocs.html
