说明

如上图，可以在 组件标签 中定义多个内容，渲染时，替换 组件模板 的指定部分

替换的的规则，就是根据 插槽的名字，上图绿色框

注意：本文介绍的，是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>