vue

插槽

个人理解：即父组件只负责传值给子组件，值的具体表现形式，位置，由子组件决定，传给子组件的值在子组件中以表示

注释：以下事列：compo1表示父组件，compo2表示子组件

插槽的类别：

1. 匿名插槽

父组件传值，子组件中用表示，匿名插槽只能表示一种
父组件中：

<template>
  <div>
    <compo2>         //在父页面中调用子组件
      <h1>这是往子组件传的值</h1>
    </compo2>
  </div>
</template>

<script>
import compo2 from "./compo2";
export default {
  components: {
    compo2: compo2
  }
};
</script>

子组件中：

<template>
<div>
     <slot></slot>  //表示子组件传过来的值
</div>
</template>

在父页面中：

2.具名插槽

即父组件传的值加上特定属性，在子组件中的加上同样的name值，表示接收特定的值

父组件中(省略了script部分)：

<template>
  <div>
    <compo2>
      <h1 slot="head">有name值</h1>   //传给具名插槽
      <p>没有name值</p>     //传给匿名插槽
    </compo2>
  </div>
</template>

在子组件内：

<template>
<div>
     <slot name="head"></slot>  //接收name相同的值
     <hr>
      <slot></slot>
</div>
</template>

表现：

作用域插槽：

子组件的中加入自定义的属性名和属性值，在父组件中使用

在子组件中

<template>
<div>
     <slot say="长江"></slot> //随便设置的属性名say和值“长江”
     <slot say="黄河"></slot>
</div>
</template>

在父组件中：

 <compo2>
     <template slot-scope="a">   //用a接收子组件的属性名和值
         <p>{{a}}</p>
     </template>
 </compo2>

结果：

element ui的表格就是根据这个原理封装出来的

v-slot:在vue2.6版本中提出，用来替代slot和slot-scope
用法：
v-slot=" "：用来取子组件的数据
v-slot:name ：用来取子组件的name值

v-slot：父组件：

<template v-slot="shi">  //这里的“shi”表示取到的子组件的值
         <p>{{shi}}</p>
</template>

子组件

  <slot  say="长江"></slot>   //这里的slot不能有name值，会取不到
  <slot  say="黄河"></slot>

表现：

v-slot:name 父组件中

  //v-slot后面的值x必须是要取值子组件的name
 <template v-slot:x="t"> 
         <p>{{t}}</p>
</template>

子组件中

<div>
     <slot name="x" say="长江"></slot>
     <slot name="x" say="黄河"></slot>
</div>

表现：