![e697f0548d3c35cd48dbe3be0e94e8b5.png](https://i-blog.csdnimg.cn/blog_migrate/b3b9663a66a2f5160b78d99b35bb06c4.jpeg)
前言
《vue 基础》系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读)
插槽 ,我理解有些类似电脑主板那些硬件的接口。vue 内部实现了一套内容分发机制,通过 slot 标签作为出口将定义内容输出。
我平时写组件只是简单的使用 slot 这个标签,其实细细琢磨它还有更多使用的功能。
简单的用法
通过一个例子说明,这也是常用的用法。
navigation-link 标签内的 innerHtml 内容,最终会被子组件“吸收”,在 slot 占位符中被替换显示。
![467fa36110c7b3196a85ef07cdcb7378.png](https://i-blog.csdnimg.cn/blog_migrate/c377c5cfe13f47382c7c815afeeb8a74.jpeg)
最后渲染的 html :
![c603492031b6579af23c5d23787a5dbd.png](https://i-blog.csdnimg.cn/blog_migrate/1c0d66002379cbb377de301a59265ea1.jpeg)
编译作用域
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。(不理解的多读几遍)
即:在 navigation-link 标签内部写的内容,虽然会被 slot 替换,但作用域依旧属于父级模板。
![128b55e34d8da6ed6d2a7110aed30991.png](https://i-blog.csdnimg.cn/blog_migrate/edb7f55416261f53eb768f09ef657a29.jpeg)
模板内 {{url}} 取值是当前所在 vue 实例定义的 data.url 属性的值,而非子组件中的 prop.url 。
后备内容(fallback content)
如果你熟悉 webpack ,那么就很好理解 fallback 后备这词的含义。
如果父模板未设置相关插槽内容,那么最后默认显示的将以 slot 标签之间的内容。
![8e4a555bc2c4b5c2283aab36900962ff.png](https://i-blog.csdnimg.cn/blog_migrate/d5d7c4f855165763dcd441348db29ae1.jpeg)
默认显示 Submit
具名插槽
为 slot 标签取个名字,因为多样性的模板出现多个想往 slot 替换的模板。
![315c0f3e58abbc737973b6350f883421.png](https://i-blog.csdnimg.cn/blog_migrate/b1de299f1132e73dc0e44e7c7e645581.jpeg)
子模板
子模板在 slot 定义 name=xxx ,
父模板这样定义,通过 v-slot:name 来指定往哪里插值:
![0d54c5c9ad3f334c13750309e52ad0c1.png](https://i-blog.csdnimg.cn/blog_migrate/4ddf4ae145501b00be4eec0f2c29d7b5.jpeg)
父模板
具名插槽缩写
和 v-bind 和 v-on 类似,只要把 v-slot:name 换成 #name 。
![21a5081af3f95797415258f3297d76a7.png](https://i-blog.csdnimg.cn/blog_migrate/b3fae5add8990bdc19b24a6be74eedc9.jpeg)
作用域插槽
根据 编译作用域 我们已经知道,父模板中为子组件 slot 替换的内容,是获取不到子组件作用域的数据的。
同时子组件的 slot 可以通过 后备内容 来默认显示数据。
但怎么通过父模板的定义,来让 slot 能动态显示数据呢?看下下面的例子:
![305c777e55f876328f2c245187c6cf30.png](https://i-blog.csdnimg.cn/blog_migrate/3891875e0f3d590c27f3b364e3f4b0ed.jpeg)
假设在子模板中,已经通过 props 或者 data 定义好了 user 对象(这是前提),然后在父模板中就可以根据 slotProps 这样一个钩子(自定义的 scope 对象)来取到 user 的所有属性,就像这段插值表达式写在子模板中一样。
总结
一个 slot 标签可能并不简单,相关细节点还是比较多的。相信通过这篇的说明能让在组件的编写中实现更多的功能。
关于我
一位“前端工程师”,乐于实践,并分享前端开发经验。
如果有问题或者想法,欢迎各位评论留言,愿大家共同进步。
关注【前端雨爸】,查阅更多前端技术心得。