说明

插槽，可以理解为 组件标签 的 内容，上图左侧红框部分

当组件渲染的时候，组件模板的 <slot></slot> ，被替换为 组件标签 的 内容 Vue从入门到放弃

插槽内可以包含 任何模板代码，包括 HTML、组件

注意： 组件模板中，没有 <slot> 标签，组件标签 的 内容 都会被抛弃

应用场景

element ui 的 button按钮、Link 文字链接、tag标签、select控件、table 等

案例

App.vue

<template>
  <div id="box">
    <Article>{{title}}</Article>
  </div>
</template>
<script>
import Article from './views/Article.vue'

export default 
{
  name: 'App',
  data:function(){
    return {
      title:'Vue从入门到放弃'
    }
  },
  components:{
    Article
  }
}
</script>

Article.vue

<template>
    <div>
        <h2><slot></slot></h2>
    </div>
</template>