【译】Vue实用笔记（二十三）：如何使用scoped solts

有很多次，我了解到很多公司想要提高他们Vue变成的效率。

这是一个非常开放性的问题，但是至少有一部分是可以通过分辨功能性的组件是否行非常频繁地编译来达到。
我们有一整套的理论在你的应用中去复用组件，让你可以把通用逻辑放在里面，以达到非常灵活地适配请他应用。

Vue.js 有slots 特性就是为了当使用这个组件的时候可以重新定义它的结构，但是他们自己是非常受限的。
有时，为了定义如何渲染一个组件你需要定义data和state。

如果你不知道slots，我建议你先从官方文档上学习一下the Vue.js docs。

Scoped slots 是一个Vue中非常牛的特性。他们像普通的solts，同时他们也可以接收属性（数据）。

让我们编译一个Clock.vue组件来演示一下，一个简单的计时器:

<template>
  <div class="clock">
    <slot :time="time">
      <p>Default slot</p>
      <p>Time: {{ time.toLocaleTimeString() }}</p>
    </slot>
  </div>
</template>

<script>
  export default {
    data: () => ({
      time: new Date()
    }),
    created() {
      setInterval(() => {
        this.time = new Date(this.time.getTime() + 1000);
      }, 1000);
    }
  };
</script>

你可能已经注意到<slot :time="time">这一行代码，它接收了一个 time属性。这就是这个组件传递一个time数据到这个组件并使用它，所有的timer的逻辑都在这个组件中。

你可能也意识到，这个组件已经自己渲染，而且这个slot有默认的内容。

但是如果我们保持timer的数据逻辑还在这个组件中的同时，重新定义他的渲染呢？

我们传递一个 time 属性给这个slot，我么可以用v-slot在这个slot的根元素（这里是template）上，。所以，任何地方你需要渲染这个 Clock组件，你需要这样做：

<template>
  <Clock>
    <template v-slot="{ time }">
      <p><b>Slot override!</b></p>
      <p>Date: {{ time.toLocaleDateString() }}</p>
      <p>Time: {{ time.toLocaleTimeString() }}</p>
    </template>
  </Clock>
</template>

v-slot接收了所有的传递给 Clock组件的属性。因为这个是一个js对象，所以我们可以用对象结构赋值操作符来获取。

你看到Scoped Slots的厉害之处了吗？你可以做更牛逼的事情，例如 render-less组件，你会在接下来的一个实用笔记中看到😜。

如果想自己个跑一下这个代码，请点击CodeSandbox。

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

See you next week.

Alex

最后编辑于：2020.01.02 20:36:59