刚学 vue 的时候, 曾经学习过 slot 插槽的使用, 但是后面接触的不多, 因为之前我还没使用 element-ui...
但是使用了 element-ui 之后, 里面的许多组件, 有时候会使用插槽, 为了巩固一下插槽, 写一个笔记
首先, 插槽有什么作用呢?
我们先来自定义一个组件:
- {{text}}
- export default {
- data(){
- return {
- text:"自定义组件"
- }
- }
- }
然后在其它组件内引入 (script 中)
import Lala from '@/components/lala.vue';
再声明一下
- components:{
- Lala
- },
之后, 在 template 中使用即可
<Lala></Lala>
这样, 会在这个页面中显示 "自定义组件" 这些文字, 代表组件成功引入.
但是当我们想在 <Lala></Lala> 标签中间添加其它内容时, 它并不会显示在页面中
例如:
<Lala> 我是在组件标签中写的内容 </Lala>
我们发现, 页面汇总并没有显示出我标签汇总写入的内容. 而 slot 插槽可以让其显示, 我们只需要在 lala 的组件模板中添加这样的代码
{{text}}
此时, 标签内的内容就显示出来了, 这就是 slot 插槽的作用, 给组件添加自定义内容
来源: http://www.bubuko.com/infodetail-3123108.html