说明
如上图,可以在 组件标签 中定义多个内容,渲染时,替换 组件模板 的指定部分
替换的的规则,就是根据 插槽的名字,上图绿色框
注意:本文介绍的,是2.6以前废弃写法,但很多框架仍然使用
代码
App.vue
<template>
<div id="box">
<Article2>
<template slot="title">{{title}}</template>
<div slot="content">
Vue是一个框架
<a href='http://cn.vuejs.org' target="_blank" slot="title">官网</a>
</div>
</Article2>
</div>
</template>
<script>
import Article2 from './views/Article2.vue'
export default
{
name: 'App',
data:function(){
return {
title:'Vue从入门到放弃'
}
},
components:{
Article2
}
}
</script>
Article2.vue
<template>
<div>
<h2>
<slot name="title"></slot>
</h2>
<div>
<slot name="content"></slot>
</div>
</div>
</template>