vue中插槽（slot）的使用

刚学vue的时候，曾经学习过slot插槽的使用，但是后面接触的不多，因为之前我还没使用element-ui。。。

但是使用了element-ui之后，里面的许多组件，有时候会使用插槽，为了巩固一下插槽，写一个笔记

首先，插槽有什么作用呢？

我们先来自定义一个组件：

<template>
    <div>
       {{text}} 
    </div>
</template>

<script>
export default {
    data(){
        return {
            text:"自定义组件"
        }
    }
}
</script>

然后在其它组件内引入（script中）

import Lala from ‘@/components/lala.vue‘;

再声明一下

components:{
    Lala
  },

之后，在template中使用即可

<Lala></Lala>

这样，会在这个页面中显示“自定义组件”这些文字，代表组件成功引入。

但是当我们想在<Lala></Lala>标签中间添加其它内容时，它并不会显示在页面中

例如：

<Lala>我是在组件标签中写的内容</Lala>

我们发现，页面汇总并没有显示出我标签汇总写入的内容。而slot插槽可以让其显示，我们只需要在lala的组件模板中添加这样的代码

<template>
    <div>
       {{text}} 
       <slot></slot>
    </div>
</template>

此时，标签内的内容就显示出来了，这就是slot插槽的作用，给组件添加自定义内容

vue中插槽（slot）的使用

原文：https://www.cnblogs.com/fqh123/p/11183502.html