slot插槽

由来：

自定义组件，以及组件中的模板

定义一个组件名 tag1
var tag = {
    template: `
        <dl>
            <dt>狮子</dt>
            <dd>是一种猛兽</dd>
        </dl>
    `
}
// 定义一个局部组件
components:{
    tag1
}

在页面结构中，使用组件

<tag1></tag1>

模板写法固定，于是 就有了 灵活的 插槽。

匿名插槽

// <tag1>老虎</tag1>
var tag1 = {
template: `
        <dl>
            <dt>
                <slot></slot>
            </dt>
            <dd>是一种猛兽</dd>
        </dl>
    `
}

标签内的内容会替换 模板中 slot 插槽的位置。
模板中的slot中，可以预先定义默认值，书写页面结构时，没有传入内容，使用默认值。

具名插槽

替换了标题，还要替换描述得话，一个插槽就不够用了。

var tag2 = {
    template: `
        <dl>
            <dt>
                <slot name="title" />
            </dt>
            <dd>
                <slot name="desc"/>
            </dd>
        </dl>
    `
}

<tag2>
    <tempalte slot="title">狮子</template>
    <tempalte slot="desc">是猛兽。</template>
</tag2>

新版本 插槽

<tag2>
    <tamplate v-slot:title>老虎</template>
    <tamplate v-slot:desc>是猛兽。</template>
    <!-- 简写 -->
    <tamplate #title>老虎</template>
    <tamplate #desc>是猛兽。</template>
</tag2

作用域 插槽

旧版本 slot-scope

slot-scope="slotProps" slotProps 是自定义的变量名，指向子组件中的 data 函数返回值

// 新旧语法不能混合使用在一个组件标签上
// slot="xxx" slot-scope="xx" 都是旧标签，是可以的
// v-slot:xxx  slot-scope="xxx" 新旧混合 mixed，会报错
`<tag1>
    <template slot="titile" slot-scope="slotProps">
        {{ slotProps.text1 }}
    </template>
    <template v-slot:desc></template>
</tag1>
`
var tag1={
    data:function(){
        return {
            text1:'子组件的内容'
        }
    },
     template:` <dl>
      <dt><slot name="tit" v-bind:txt1="txt1">狮子</slot></dt>
      <dd><slot name="mes">是一种生存在非洲与亚洲的大型猫科动物</slot></dd>
      </dl>`
}

新版本

// v-slot:tit="slotProps"  //slotProps为自定义的变量名，指向子组件中的data函数返回值
//将具名插槽赋值，很简洁；
//不仅完成插槽指向，还完成了数据挂载
`<tag1>
        <template v-slot:tit="slotProps">
          {{slotProps.txt1}}
        </template>
        <template v-slot:mes></template>
</tag1>
`
var tag1mes = {
      data:function(){
        return {
          txt1:'我是子组件里的数据: 猫头鹰'
        }
      },
      template:` <dl>
      <dt><slot name="tit" v-bind:txt1="txt1">狮子</slot></dt>
      <dd><slot name="mes">是一种生存在非洲与亚洲的大型猫科动物</slot></dd>
      </dl>`
}

参考：