vue教程:插槽slot

说明

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

当组件渲染的时候,组件模板的 <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>

原文出处:https://malaoshi.top/show_1IX3I97RLfef.html