Vue slot插槽详解

slot -插槽

一、slot 插槽

• 调用组件时，写在组件标签内的内容，默认是不会被渲染的
• 如果需要写在组件标签内的内容显示出来，那么就需要solt插槽

二、slot 相关话术

• 定义组件时要想好在哪个位置去渲染 solt 内容
• 在想好位置那里放置一个 slot 标签即可
• slot内容就会自动替换 slot 标签

1. slot内容

   调用组件时写在组件标签内的内容就叫slot内容

2. slot标签

   vue的内置组件

3. slot 默认内容

   slot标签内的内容就是slot的默认内容

4. 具名插槽

   • 给slot标签设置一个name属性,这个slot标签就叫做具名slot标签
   • slot 标签在一个组件内是可以使用多次的
   • 给slot标签去了名字后,slot内容想要渲染到哪个slot里面的话,插槽内容就需要设置slot属性,属性的值就是slot标签name属性的值

三、插槽的编译作用域

1. 编译作用域：

   父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在作用域编译的。

   写在组件标签内的插槽内容不属于组件的template。只是用过slot可以让他渲染在子组件内。

2. 插槽的编译作用域

   虽说插槽内容最终渲染到子组件内,但是他的编译作用域还是要看插槽内容写在哪个组件内,而不是看插槽内容最终渲染到哪个组件的template里面

四、作用域插槽

• 希望 插槽内容 中使用子组件的作用域

  1.定义组件的slot的时候，将要在插槽内容中使用的数据，绑定在slot标签上（不能绑定name属性）

  //组件内
  <slot :a'msg' :b='age'></slot>
  

  2.在插槽内容的标签上，设置 slot-scope属性，属性值随便写，这个属性值就是上一个步骤绑定出来的一个数据大对象

  //插槽内容
  <p slot-scope='obj'>我是插槽内容 {{obj.a}} </p>
  

五、插槽新语法

• 2019年2月4号 2.6.0版本更新（2018年过年）
• 新语法插槽要在插槽内容外包裹template标签,在template标签上写v-slot:xxx,xxx是插槽标签的name的属性值

<-----老语法具名插槽使用------->
  <hello>
  	<p slot="top"> 我的天</p>

  </hello>
<-----新语法具名插槽使用------->
   <hello>
    <template v-slot:top>
        <p> 我的天</p>
    </template>
    <template v-slot:bottom>
				<p> 我的地</p>
    </template>
  </hello>

• 新语法作用域插槽 v-slot:xxx = yyy

<-----老语法作用域插槽使用------->
  <hello>
  	<p slot="top" slot-scope="{msg,age}"> 我的天{{msg,age}}</p>

  </hello>
<-----新语法作用域插槽使用------->
   <hello>
    <template v-slot:top="{msg,age}">
        <p> 我的天 {{msg,age}}</p>
    </template>
  </hello>

• 只有一个插槽标签时,组件标签的插槽内容可以不用template包裹,v-slot要写在组件标签上