Vue07/Vue 具名插槽 及 作用域插槽( 带数据插槽 ) 作用介绍和说明

一. 具名插槽 --> 父传子

语法:

父组件

  <template v-slot:子组件slot内插槽名>
    <h3>具名插槽</h3>
  </template>

 //简写

  <template #子组件slot内插槽名>
    <h3>具名插槽简写</h3>
  </template>

子组件

<slot name="自定义插槽名"> <slot>

作用:1.当子组件内有多处不确定的结构时使用

介绍: 具名插槽则是当子组件需要显示不同的效果时使用具名插槽，通过 name 属性给插槽命名 父组件向子组件的具名插槽提供内容的时候用 v-slot:name的插槽名 的形式提供内容

说明: 子组件中给插槽添加名字 父组件用v-slot指令传递具名插槽

应用场景: 当需要在子组件内不同的位置插入不同的内容时

一. 作用域插槽 -- 带数据插槽 --> 子传父

语法:

子组件

// 传字符串

<slot name="插槽名" yes="字符串" no="字符串" money="字符串"></slot>

//传Vue数据

<slot name="插槽名" :yes="data内变量名" :no="data内变量名" money="data内变量名"></slot>

父组件

<template #子组件slot内插槽名="obj">
  <button>{{ obj.yes }}</button>
  <button>{{ obj.no }}</button>
  <button>{{ obj.money }}</button>
</template>

//解构赋值接收

<template #子组件slot内插槽名="{ yes, no, money }">
  <button>{{ yes }}</button>
  <button>{{ no }}</button>
  <button>{{ money }}</button>
</template>

作用:

1.父组件给子组件传递结构时, 需要用到子组件内的数据, 例如自己封装一个 MyTable 组件, 来自定义表头表体的内容

说明: 作用域插槽是一个特殊类型的插槽,用作一个(能被传递数据) 可重用模板。来代替已经渲染好的元素 ， 利用slot标签将子组件的数据传递到分发的内容上 

描述: 作用域插槽就是带有数据的插槽 ，既带参数的插槽，简单说就是子组件提供给父组件的参数 该参数仅限于插槽中使用 父组件可根据子组件传过来的插槽数据来进行不同的方法展现和填充插槽内容

介绍:

1.作用域插槽是Vue.js中一个很有用的特性，可以显著提高组件的通用性和可复用性

2.作用域插槽实际上是带有数据插槽 可以获取到子组件传递的参数 将这些参数使用到父组件插值表达式里

3.官方叫他作用域插槽 实际上 对比默认和具名插槽后 可以叫他 带数据插槽 , 默认和具名插槽都是在组件template里面写 , 但是作用域插槽要求 在slot上面绑定数据 

应用场景: 作用域插槽的使用场景一般都是由于在子组件里对slot标签进行了 v-for/v-if循环判断等 而slot模块又需要用到v-for/v-if上的判断循环参数