Vue一个案例引起「内容分发slot」的最全总结

时间 2019-11-30

标签 vue 一个案例引起内容分发 slot 总结繁體版

原文原文链接

今天咱们继续来讲说 Vue，目前一直在自学 Vue 而后也开始作一个项目实战，我一直认为在实战中去发现问题而后解决问题的学习方式是最好的，因此我在学习一些 Vue 的理论以后，就开始本身利用业余时间作了一个项目，而后经过项目中的一些案例进行总结。bash

今天咱们来讲说 Vue 中的内容分发 <slot>，首先 Vue 实现了一套内容分发的 API，这套 API 是基于当前的 Web Components 规范草案，将 <slot> 元素做为承载内分发内容的出口，内容分发是 Vue 中一个很是重要的功能，不少第三方的框架库都使用到了 <slot> 功能，因此掌握这个技能是很是重要的。数据结构

它可让咱们更加优雅的使用组件。app

我对 <slot> 的理解有三点或者说优点，固然，这个只是我我的的理解，若是你有不一样理解的地方，欢迎交流讨论，这样才能碰出不同的花火。框架

回到主题，我对内容分发的三点理解：学习

能够优雅的包装原生的 HTML 标签
组件标签能够嵌套，就像使用原生 HTML 标签同样
让组件更加的通用和可复用

若是没有 <slot> 元素，当咱们在组件的标签中使用组件标签或者组件标签中使用 HTML 原生标签，都是没有任何做用的，这个和咱们以往使用和认识的 HTML 是相违背的。动画

下面咱们就对这三点去作一个详细的阐述，先从一个张图开始。ui

这个你们都见过，一个标准的 dialog 对话框，项目中也常用到，咱们把它抽出来作成一个组件以下：this

<div class="dialog-panel">
  <div class="dialog-header">
    <h3 class="title">标题</h3>
    <button class="close">x</button>
  </div>
  <div class="dialog-content">这是一个标准的 dialog 对话框</div>
  <div class="dialog-footer">
    <el-button type="primary" plain>取消</el-button>
    <el-button type="primary">肯定</el-button>
  </div>
</div>
复制代码

首先这个组件不够灵活，内容基本上是写死的，就拿标题来讲，咱们但愿标题是能够变化的，让使用者能够传递标题进来，那么咱们该如何去设计咱们的这个组件呢？这就是咱们今天要说的内容分发 <slot>了，咱们小小的修改下咱们的例子。spa

<div class="dialog-panel">
  <slot></slot>
  <div class="dialog-content">这是一个标准的 dialog 对话框</div>
  <div class="dialog-footer">
    <el-button type="primary" plain>取消</el-button>
    <el-button type="primary">肯定</el-button>
  </div>
</div>

复制代码

在父组件中使用它设计

<dialog-panel>
  <div class="dialog-header">
    <h3 class="title">传递进来的标题</h3>
    <button class="close">x</button>
  </div>
</dialog-panel>
复制代码

你会发现组件渲染以后，<slot> 元素会被替换成组件中包裹的元素，标题的内容彻底由外部传递进来。

上面咱们只是嵌套了一个简单的 div 标签元素，插槽能够传入任何的元素，不论是HTML，仍是组件元素。

插槽的默认内容

不只如此，插槽还支持默认内容，当咱们在外部没有传递给插槽内容时，咱们能够给插槽一个默认的显示内容，若是外部有内容，默认的内容将会被外部的内容替换掉。

<div class="dialog-panel">
  <slot>
    <div class="dialog-header">
        <h3 class="title">这是默认标题</h3>
        <button class="close">x</button>
    </div>
  </slot>
  <div class="dialog-content">这是一个标准的 dialog 对话框</div>
  <div class="dialog-footer">
    <el-button type="primary" plain>取消</el-button>
    <el-button type="primary">肯定</el-button>
  </div>
</div>
复制代码

在父组件中使用它，不嵌套任何的内容时，咱们的组件就会有个默认的渲染标题。

<dialog-panel>
    //无内容
</dialog-panel>
复制代码

若是咱们在父组件中提供了内容，默认的内容就会被替换。

<dialog-panel>
    <div class="dialog-header">
        <h3 class="title">我是新传递的标题</h3>
        <button class="close">x</button>
    </div>
</dialog-panel>
复制代码

具名插槽

有些时候，咱们除了标题有这么高的自由度以外，咱们也想其它的内容也有这样的灵活性，让使用者也能经过父组件传递进来，Vue 中给咱们提供了方法，咱们一次可使用不少插槽，而后给每个插槽起个名字，也就是给咱们的 <slot> 添加一个 name 属性。

因而咱们就开始修改咱们的对话框

<div class="dialog-panel">
  <slot name="header"></slot>
  <slot name="content"></slot>
  <slot name="footer"></slot>
</div>
复制代码

咱们在外部使用时，只须要提供相应名称，咱们就能够渲染出咱们须要的

<dialog-panel>
  <template slot="header">
    <div class="dialog-header">
      <h3 class="title">带名字的插槽</h3>
      <button class="close">x</button>
    </div>
  </template>
  <template slot="content">
    <div class="dialog-content">这是一个标准的 dialog 对话框</div>
  </template>
  <template slot="footer">
    <div class="dialog-footer">
      <el-button type="primary" plain>取消</el-button>
      <el-button type="primary">肯定</el-button>
    </div>
  </template>
</dialog-panel>
复制代码

能够看到，咱们在外部能够控制组件的所有内容只要咱们须要，这给咱们的组件带来了很高的灵活性。除了灵活性，Vue 中还给我提供了一种叫 做用域插槽 的用法，它让咱们的组件更加的复用性。

具名插槽不只仅只能用在 <template> 元素上，它也能够直接用在一个普通的元素上

<div slot="header" class="dialog-header">
    <h3 class="title">带名字的插槽</h3>
    <button class="close">x</button>
</div>
复制代码

做用域插槽

做用域插槽在 Vue 中是一个很是重要的一个功能，它让组件更加的可复用性，可是官方文档上对做用域插槽的解释很使人蛋疼，反正我是看了几遍不是太理解，最后经过本身写了几个案例才明白原来能够这么厉害，若是你也和我同样一开始不太理解，不妨跟着我看看下面的案例或许对你的帮助很大。

首先咱们实现一个星级评价组件

<template>
<div class="rate-list">
    <span 
     v-for="(star, index) in stars" 
     :key="index" 
     @click="clickStart(index)"
    >
      <i v-bind:class="[star ? off : on]"></i>
    </span>
</div>
<template>
<script>
export default {
  name: "RateList",
  data() {
    return {
      off: "el-icon-star-off",
      on: "el-icon-star-on",
      rating: 2
    };
  },
  methods: {
    clickStart(index) {
      this.rating = index + 1;
    }
  },
  computed: {
    stars() {
      return [1, 2, 3, 4, 5].map(value => this.rating < value);
    }
  }
};
</script>
复制代码

这是咱们写死的一个星级评价组件，一直都用着还不错，但是忽然有一天呢，产品说这个小星星用腻歪了能不能换个别的图标？我最近爱上了 ❤️ 形因此用这个表示吧。到这里，你可能也想到了咱们把这个图标给抽离出来，放在外部，因此咱们结合上面刚刚学到的 <slot> 元素去修改组件。

<div class="rate-list">
    <slot></slot>
</div>
复制代码

在父组件中使用：

<rate-list>
  <span 
    v-for="(star, index) in stars" 
    :key="index" 
    @click="clickStart(index)"
  >
    <i v-bind:class="[star ? off : on]"></i>
  </span>
</rate-list>
复制代码

完成以后呢，咱们不再怕之后更换内容的状况了，无论之后怎么换，我均可以在使用的时候直接在外部添加内容便可，可是彷佛有一些问题，由于咱们的代码看起来不是很优雅，并且咱们把操做逻辑都放在的父组件中，这显然不太友好，最好的方式确定是咱们只须要在父组件中直接调用便可，因此做用域插槽这里就起到很大的做用了，咱们来看看若是使用做用域插槽是如何保持优雅的。

<div class="rate-list">
    <span 
     v-for="(star, index) in stars" 
     :key="index" 
     @click="clickStart(index)"
    >
      <slot :star="star"></slot>
    </span>
</div>
复制代码

在父组件中使用：

<rate-list>
  <template slot-scope="props">
    <i :class="[props.star ? off : on]"></i>
  </template>
</rate-list>
复制代码

能够看到咱们把操做逻辑所有都放在了组件内部，在外部咱们只须要添加须要的元素便可，简单优雅高复用性。

在 Vue2.5.0+，slot-scope 再也不限制在 <template> 元素上使用，而能够用在插槽内的任何元素或组件上

有些同窗看到这里可能尚未很好的理解做用域插槽，那好吧我就送佛送到西，咱继续看一个例子，咱们建立一个列表面板组件。

<template>
  <div class="list-box">
    <h1>{{title}}</h1>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <slot :item="item"></slot>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "List",
  props: {
    title: String,
    list: Array
  }
};
</script>
复制代码

在父组件中使用：

<template>
  <div class="tirp-wrapper">
    <list title="酒店列表" :list="list">
      <span slot-scope="props">
        {{props.item.name}}
      </span>
    </list>
  </div>
</template>
<script>
import List from "./List";
export default {
  name: "Trip",
  components: { List },
  data() {
    return {
      list: [{
        name: "四季度假村酒店"
      },{
        name: "布宜诺斯艾利斯四季酒店"
      },{
        name: "孟买四季酒店"
      },{
        name: "新加坡四季酒店"
      }]
    };
  }
};
</script>
复制代码

咱们再来给每一个酒店添加一些描述标签，也可以完美的展现出来。

<template>
  <div class="tirp-wrapper">
    <list title="酒店列表" :list="list">
      <div slot-scope="props">
        <span>
        {{props.item.name}}
      </span>
      <el-tag>{{props.item.tag}}</el-tag>
      </div>
    </list>
  </div>
</template>
<script>
import List from "./List";
export default {
  name: "Trip",
  components: { List },
  data() {
    return {
      list: [{
          name: "四季度假村酒店",
          tag: "海滨风光"
        },{
          name: "布宜诺斯艾利斯四季酒店",
          tag: "轻奢度假"
        },{
          name: "孟买四季酒店",
          tag: "服务周到"
        },{
          name: "新加坡四季酒店",
          tag: "沙海绿洲"
        }]
    };
  }
};
</script>
复制代码

画风一转，下面咱们把它变成一个消息通知列表，能够看到每一个文章的点赞数量。

<template>
  <div class="tirp-wrapper">
    <list title="消息通知" :list="list">
      <div slot-scope="props">
        <span>
        {{props.item.title}}
      </span>
      <el-badge :value="props.item.value" :max="99">
        <el-button size="mini">
          <i class="fa fa-thumbs-o-up"></i>
        </el-button>
      </el-badge>
      </div>
    </list>
  </div>
</template>
<script>
import List from "./List";
export default {
  name: "Trip",
  components: { List },
  data() {
    return {
      list: [{
          title: "Vue一个案例引起「动画」的使用总结",
          value: 200
        },{
          title: "Vue一个案例引起的递归组件的使用",
          value: 20
        },{
          title: "Vue一个案例引起的动态组件与全局事件绑定总结",
          value: 50
        }]
    };
  }
};
</script>
复制代码

能够看到，无论咱们如何的去修改数据结构也好，添加不一样的内容也罢，咱们均可以完美的完成，并且不用修改咱们的子组件，只须要在外部调用时填充咱们须要的内容便可。

有没有感觉到做用于插槽的强大与灵活。

若是用一句话来描述做用域插槽的话：它可让咱们在父组件中访问子组件的数据，就像利用 props 属性让子组件访问到父组件的数据同样。

总结

插槽是一个重要且很是强大的功能，它可让咱们的组件具备很是的灵活性与可复用性，而做用域插槽更加的强化了这些特性。

做用域插槽是一个不太好理解的地方，但愿经过本篇文章可以让你解惑。

若是你以为本文对你有帮助，欢迎转发，点赞，不足之处欢迎指正!