vue2 插槽

默认插槽

注册的组件标签内写入任意内容或html代码，会在子组件内的slot标签处显示，有几个slot标签就出现几次

具名插槽

如果不想出现插入的solt内容重复的情况，就需要使用具名插槽。 在子组件内的slot标签内定义name属性与任意属性值, 父组件内要插入的内容，用dom标签包裹起来，并定义slot属性，内容想要传递到哪个位置，slot属性值，就要对应子组件内那个位置slot标签的name属性值。

父组件

<template>
  <div>
    <breadcrumb>
     <div slot="one">
         标题一
     </div>
    </breadcrumb>
  </div>
</template>

子组件

<template>
  <div>
    <h1>11111111</h1>
    <slot name="content"></slot>     //而不是这里
    <div class="title">
      <h2>22222222</h2>
      <slot name="one"></slot>       //标题一会插入到这里
    </div>
  </div>
</template>

包裹插入内容的标签也可以用template标签，与其他标签的不同点在于。template不会产生dom

<template>
  <div>
    <breadcrumb>
      <template v-slot:one> 标题一 </template>
      //  也可以换成下面这种写法，只有标签是template的时候可以
      //  <template v-slot:one> 标题一 </template>
    </breadcrumb>
  </div>
</template>

作用域插槽

子组件 在子组件内用slot标签传参，可以使父组件收到slot标签传过来的参数。（可以传递多个参数）

<template>
  <div>
    <h1>11111111</h1>

    <slot name="two"></slot>

    <div class="title">
      <h2>22222222</h2>
      <slot name="one"></slot>
    </div>

    <p>这是一段p标签内容</p>

    <slot :arr_slot="arr" :bb="str"></slot>   //传参
  </div>
</template>

父组件

使用scope或者slot-scope属性来接受参数，属性值的名字随便定义*，(接受参数后要调用。不然会报错)*

<template>
  <div>
    <breadcrumb>      //接受参数           //调用参数（如果不调用参数会报错）
      <template scope="receive"> 标题一 {{ receive.bb }} </template>
    </breadcrumb>
  </div>
</template>

插槽优先级

具名插槽的优先级最大

1.具名插槽与作用域插槽共同使用的情况下

父组件

<template>
  <div>
    <breadcrumb>
      <template scope="receive" slot="one"> 标题一 {{ receive.bb }} </template>
    </breadcrumb>
  </div>
</template>

子组件

<template>
  <div>
    <slot></slot>

    <h1>11111111</h1>

    <slot name="two"></slot>

    <div class="title">
      <h2>22222222</h2>
      //内容会显示在这里，但是作用域插槽的变量会失效，无法显示
      <slot name="one"></slot>  
    </div>

    <p>这是一段p标签内容</p>

    <slot :arr_slot="arr" :bb="str"></slot>
  </div>
</template>

总结：具名插槽和作用域插槽不能共同使用，不然会造成作用域插槽无法显示

2.作用域插槽与默认插槽

父组件

<template>
  <div>
    <breadcrumb>
      <template scope="receive"> 标题一 {{ receive.bb }} </template>
    </breadcrumb>
  </div>
</template>

子组件

<template>
  <div>
  //默认插槽也会显示字体内容，但不会显示传递的变量
    <slot></slot> 

    <h1>11111111</h1>

    <slot name="two"></slot>

    <div class="title">
      <h2>22222222</h2>
      <slot name="one"></slot>
    </div>

    <p>这是一段p标签内容</p>

    <slot :arr_slot="arr" :bb="str"></slot>  //显示内容与变量
  </div>
</template>

总结：作用域插槽与默认插槽不能共同使用，不然会造成一部分内容重复