说明
插槽,可以理解为 组件标签 的 内容,上图左侧红框部分
当组件渲染的时候,组件模板的 <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>