vue学习-插槽

1.插槽内容

 

父组件可以在html的子组件元素中间插入html 字符串 组件，这些东西都会被插入到子组件的<slot></slot>所占的位置上，如果子组件没有<slot></slot>，则插入的内容会被抛弃

  <slot-child>
    <h3>插槽内容</h3>
  </slot-child>

  <div>slot-child</div>
  <slot></slot>

渲染结果：

---

2.渲染作用域

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

插槽内可以访问与模板其余部分相同的实例 property (即相同的“作用域”)，不能访问子组件的实列property

---

3.备用内容

 子组件可以在slot标签加入备用内容。当父组件模板提供插槽内容，将渲染提供的插槽内容。如果没有，则会渲染slot标签之间的备用内容

  <slot>
    <h3>备用内容</h3>
  </slot>

---

4.具名插槽

有时我们需要多个插槽，对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽

template v-slot:name包含的内容会替换有相同的的name的slot的位置

一个不带 name 的 <slot> 出口会带有隐含的名字“default”，即不用template也相当于v-slot:defalut，不写slot name=XX也相当于slot name="default"

<template>
  <slot-child>
    <template v-slot:default>
      <span>defalut{{ msg }}</span>
    </template>

    <template v-slot:one>
      <span>one{{ msg }}</span>
    </template>

    <template v-slot:two>
      <span>two{{ msg }}</span>
    </template>
  </slot-child>
</template>

<template>
  <div>
    <span>1</span>
    <slot name="one"> </slot>
  </div>

  <div>
    <span>2</span>
    <slot name="two"> </slot>
  </div>

  <div>
    <span>3</span>
    <slot name="default"> </slot>
  </div>
</template>

---

5.作用域插槽

通过在slot绑定属性，父组件可以访问到这些子组件数据，多个插槽时注意name要一致

    <template v-slot:one="slotProps">
      <span>one{{ msg }}</span>
      <h3>{{ slotProps.item }}{{ slotProps.str }}</h3>
    </template>

<slot name="one" :item="item" :str="str"> </slot>

独占默认插槽的缩写语法

只有一个插槽时，上面是下面一种的缩写，:default可以省略

不过，只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法

  <slot-child v-slot:default="slotProps">
    <h3>{{ slotProps.item }}{{ slotProps.str }}</h3>
  </slot-child>

  <slot-child>
    <template v-slot:default="slotProps">
      <h3>{{ slotProps.item }}{{ slotProps.str }}</h3>
    </template>
  </slot-child>

---

6.解构插槽

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里

function (slotProps) {
  // ... 插槽内容 ...
}

这意味着和函数入参的解构的操作都可以做

解构 {str} = slotProps 

解构重命名 {str: str2}  = slotProps

解构定义备用内容 {str = '备用内容'} = slotProps，注意这是str属性为undefined的时候(显式声明str:undefined或者<slot>标签没有:str=XX)，str是null或者空字符串并不会使用'备用内容'

    <template v-slot:two="{ str = '备用str' }">
      <span>two{{ msg }}</span>
      <h3>{{ str }}</h3>
    </template>

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

---

7.动态插槽名

以下等同于<template v-slot:one="slotProps">

<template v-slot:[oneName]="slotProps">

  data() {
    return {
      oneName: "one",
    };
  },

---

8.具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。

例如 v-slot:header 可以被重写为 #header：

然而，和其它指令一样，该缩写只在其有参数的时候才可用，如#="{ item }"是无效的

必须始终以明确插槽名取而代之， #default="{ item }"

动态插槽名也可以缩写：

<template #[oneName]="slotProps">