Vue.js slot插槽

Posted 2020-12-01 ---空白---

1.个人理解的插槽

之所以使用组件，就是因为组件可以将复杂的页面分割成多个部分，每个 部分就是一个组件（也是一个vue文件）。要使用这个组件，只需要引入组件文件，并在模版中写入组件标签即可，引入了这个子组件，就相当于引入了这个组件的html模版，例如：

// App.vue
<template>
    <div id="app">
        <Child />
    </div>
</template>

// Child组件
<template>
    <div id="child">
        <h2>我是Child组件</h2>
    </div>
</template>

渲染之后就是

<div id="app">
   <div id="child">
      <h2>我是Child组件</h2>
   </div>
</div>

父组件想要插入数据到子组件中，无非就是将数据通过属性绑定的形式，然后子组件通过props接收。但是这种方法只能用来传递一些纯数据（对象和数组），无法传入一段html代码给子组件，slot就是为此而生的

2.slot基本用法

在原生的html中，我们经常在一个块级标签中插入n个标签，Vue中父组件给子组件插入标签也是这种写法

// App.vue
<template>
  <div id="app">
    <Child>
      <!-- 在子组件中插入标签 -->
      <h2>我是插入的h2</h2>
    </Child>
  </div>
</template>

父组件给子组件插入（传递）一段html标签，子组件需要一个位置进行接收，这个位置就是子组件的slot标签。slot标签的位置就是插入标签的位置

// 子组件
<template>
    <div id="child">
<!-- slot标签将被插入的标签替代 -->
        <slot></slot>
        <h2>我是Hello组件</h2>
    </div>
</template>

渲染结果：

<div id="app">
    <div id="child">
        <h2>我是插入的h2</h2>
        <h2>我是Child组件</h2> 
    </div>
</div>

这种插槽一个，被称为匿名插槽。

3具名插槽

如果子组件有多个插槽，就需要为每个插槽添加一个标识，即name属性,方便对号入座

<template>
    <div id="child">
        <slot name="top"></slot>
        <h2>我是Child组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

父组件插入标签时 通过设定slot属性,对比slot的name属性值，来关联对应的插槽

<template>
  <div id="app">
    <Child>
      <!-- 在子组件中插入标签 -->
      <h2 slot="top">我是插入的h2</h2>
      <h5 slot="bottom">我是插入的h5</h5>
    </Child>
  </div>
</template>

渲染结果：

<div id="app">
    <div id="child">
        <h2>我是插入的h2</h2>
        <h2>我是Child组件</h2> 
        <h5>我是插入的h5</h5>
    </div>
</div>

PS:插槽可以空着不用，父组件不插入标签元素，插槽就不会被渲染，利用这个特性可以控制子组件的某些空间是否展示对应的元素
插槽和props传参可以同时使用，两者不冲突

4.插槽的默认内容

slot标签内可以写html代码，如果这个插槽没有被替换，会显示该插槽内的html内容，反之会被替换

<template>
    <div id="child">
        <slot name="top">
          <p>我是top插槽没使用的时候展示的内容</p>
        </slot>
        <h2>我是Child组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

// App.vue
<template>
  <div id="app">
    <Child>
      <h5 slot="bottom">我是插入的h5</h5>
    </Child>
  </div>
</template>

渲染结果:name="top"的插槽显示默认的内容

<div id="app">
    <div id="child">
        <p>我是top插槽没使用的时候展示的内容</p> 
        <h2>我是Child组件</h2>
        <h5>我是插入的h5</h5>
    </div>
</div>

5.slot-scope（作用域插槽） 为slot标签绑定数据

这个功能类似反向props，子组件通过属性绑定的形式，将相应的数据绑定到slot标签中，当父组件要插入标签来替换这个slot时，就可以读取这个绑定在slot标签中的数据

// 子组件
<template>
    <div id="child">
 <!-- 在slot标签中2个数据 -->
        <slot name="top" :p1="p1" :p2="p2">
        </slot>
        <h2>我是Hello组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

<script>
export default {
  data () {
    return {
      p1: {name: '乔治',age: 4},
      p2 :{name: '佩琪',age: 8}
    }
  }
}
</script>

父组件在替代slot的标签中添加 slot-scope属性，表示接受当前slot绑定的数据。slot-scope的值可以随意写,例如slot-scope="xxx"
因为slot标签上可能绑定了多个数据，所以vue将所有的数据都包裹在一个对象内，可以通过这个对象的属性名来访问对应的数据。

// App.vue
<template>
  <div id="app">
    <Hello>
      <template slot-scope="xxx" slot="top">
        <p>{{xxx.p1.name}}</p>
        <p>{{xxx.p1.age}}岁</p>
        <p>{{xxx.p2.name}}</p>
        <p>{{xxx.p2.age}}岁</p>
      </template>
      <h5 slot="bottom">我是插入的h5</h5>
    </Hello>
  </div>
</template>

xxx.p1.name => 乔治
xxx.p1.age => 4
xxx.p2.name => 佩琪
xxx.p2.age => 8