slot内容分发

Posted 2020-11-05 此生zcy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了slot内容分发相关的知识，希望对你有一定的参考价值。

slot 内容分发：为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。

比如我们遇到组件需要相互嵌套这样的情况：
App.vue 文件

<template>
    <div class="app">
        <Hello>
          <World></World>
          <Vue></Vue>
        </Hello>
    </div>
</template>

Hello.vue 文件

<template>
    <div class="hello">
        <h3>我是 hello 组件</h3>
    </div>
</template>

那这么直接写是肯定只显示 <Hello> 组件的内容

所以就需要用到 slot 插口，否则该组件标签中的内容将会被丢弃

一、单个插槽

只需要在 Hello.vue 文件内写入 <solt></slot> 标签

<template>
    <div class="hello">
        <h3>我是 hello 组件</h3>
        <slot>此处可自定义内容，如果该组件的标签内没有内容，则显示此内容</slot>
    </div>
</template>

注意：<solt></slot> 标签内是可以自定义内容的，如果在调用的 <Hello></Hello> 标签内没有写入任何内容，则显示 <solt></slot> 标签内的自定义内容，否则显示在调用的 <Hello></Hello> 标签内写入的内容

假如我们想要改变 <Hello></Hello> 组件内 <World></World> 和 <Vue></Vue> 的显示位置，就可以用到一个特殊的特性 name 来进一步配置如何分发内容，多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

App.vue 文件

<template>
    <div class="app">
        <Hello>
          <World slot="world"></World>
          <h5>我是备用插槽内部显示的内容</h5>
          <Vue slot="vue"></Vue>
        </Hello>
    </div>
</template>

Hello.vue 文件

<template>
    <div class="hello">
        <slot name="vue"></slot>
        <h3>我是 hello 组件</h3>
        <slot name="world"></slot>
        <slot></slot>
    </div>
</template>

最后渲染显示为

三、作用域插槽

1. 作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

在子组件中，slot 插槽还可以用作传递数据，类似于用 prop 来传递数据

在子组件 Hello.vue 中，只需要将需要传递的内容写入插槽中

<template>
    <div class="hello">
        <h3>我是 hello 组件</h3>
        <!-- text 和 text1 是自定义的，可以随便写 -->
        <slot text="我是hello" text1="组件的数据"></slot>
    </div>
</template>

<slot text="我是hello" text1="组件的数据"></slot> 相当于被渲染为

{
    text:‘我是hello‘,
    text1:‘组件的数据‘
}

在 App.vue 中调用 Hello 组件时，通过在 template 中写入 slot-scope 特殊属性来获取数据

<template>
    <div class="app">
        <Hello>
          <!-- template 是该作用域插槽的模版， slot-scope是一个特殊属性，用来接收 hello 组件中插槽传过来的值 -->
          <template slot-scope="hello">
            <!-- 通过访问一个 json 的方式访问 hello 中 slot 传过来的值 -->
            <span>{{hello.text}} + {{hello.text1}}</span>
          </template>
        </Hello>
    </div>
</template>

注意：在 vue 2.5.0以上版本，就不需要用到 template 模板了，slot-scope 可以作用在任意元素中

被渲染的结果为：

2. 更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项

在 App.vue 组件内

<template>
    <div class="app">
      <!-- 在子组件绑定 items 把父组件的数据传给子组件 -->
        <Hello :items="items">
          <li slot="item" slot-scope="bbb">
            {{ bbb.text }}
          </li>
        </Hello>
    </div>
</template>

<script>
// 引入 Hello 组件
import Hello from ‘./assets/components/Hello.vue‘
export default {
  data(){
    return {
      items:[
        {text:‘aaaaaa‘},
        {text:‘bbbbb‘}
      ]
    }
  },
  // 注册 Hello 组件
  components:{
    Hello
  }
}
</script>

在 Hello.vue 组件中

<template>
    <div class="hello">
        <ul>
            <!-- 此处的 items 为父组件传过来的数据 -->
            <!-- text 为 item 内的对应数据，因为 items 是一个对象，所以要用到绑定，否则页面上直接渲染出来的内容为 item.text -->
            <slot name="item" v-for="item in items" text="item.text"></slot>
        </ul>
    </div>
</template>

<script>
export default {
    // 接收父组件传过来的 items 数据
    props: [‘items‘],
}
</script>