Vue中插槽的使用

Vue插槽

一、概念
要了解 slot 插槽 , 首先需要了解自定义组件，以及组件中的模板

举例：
自定义一个组件名 tag1

//组件模板为
var tag1mes = {
  template:`<dl> 
    <dt>狮子</dt>
    <dd>是一种生存在非洲与亚洲的大型猫科动物</dd>
  </dl>`
}
...定义一个局部组件
components:{
   tag1:tag1mes
}
...

在结构中加入这个组件，利用浏览器调试工具，可以看到渲染的结构为

<dl>
  <dt>狮子</dt>
  <dd>是一种生存在非洲与亚洲的大型猫科动物</dd>
</dl>

此时此刻，如果我们想进一步丰富template模板中展示内容的灵活性，可以借助插槽slot
需求：如果我们想把模板中的狮子替换成老虎
二、如何实现?

1. 匿名插槽

<tag1>老虎</tag1>  //将要写的内容写在标签内，像HTML标签一样

var tag1mes = {
  template:`<dl> 
    <dt><slot></slot></dt>  
    <dd>是一种生存在非洲与亚洲的大型猫科动物</dd>
  </dl>`
}

此时，老虎会渲染到slot位置。

2. 具名插槽

<tag1 :fatherdata="fatherdata">
        <template slot="tit">老虎</template>
        <template slot="mes">大型猫科动物；毛色浅黄或棕黄色，满身黑色横纹；头圆、耳短，耳背面黑色，中央有一白斑甚显著。</template>
</tag1>

template:` <dl>
      <dt><slot name="tit">狮子</slot></dt>
      <dd><slot name="mes">是一种生存在非洲与亚洲的大型猫科动物</slot></dd>
</dl>`

通过slot name的属性，将template slot=“name名” 一一对应起来。

3. 作用域插槽
意义何在？
如果你想 父组件访问子组件内部数据

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

<tag1>
        <template slot="tit" slot-scope="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>`
}

结果为：我是子组件里的数据: 猫头鹰
是一种生存在非洲与亚洲的大型猫科动物