vuedose.tips（翻译系列二十三）

Using Scoped Slots in Vue.js

我多次认识到想要在Vue.js进行编码时如何提高生产力

这是一个过于开放的问题，但是至少可以通过以下方式实现这一点：确定他们在应用程序中经常构建的功能，然后拥有可重用组件的工具包，使您可以在其中放置通用逻辑，同时又足够灵活 适应其他应用。

Vue.js带有插槽以使组件具有可重新定义的结构，但它们本身的功能非常有限。有时您需要一些数据或状态来定义组件应如何呈现。

如果您不知道slots，建议您先在Vue.js文档中学习。

作用域插槽是Vue.js中的一项高级功能，可让您执行此操作。它们就像普通slots一样，但是它们也可以接收属性。

让我们构建一个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”>这行，即接收时间属性的slots。这就是Clock.vue组件将时间数据发送到使用它的组件的方式，同时封装了计时器逻辑本身。

您可能还已经意识到，由于该组件在插槽中具有一些默认内容，因此它本身已经可以渲染时间。

好吧，由于我们将time属性传递到了插槽，因此我们只需在Clock插槽的根元素上使用v-slot指令即可完成此操作。因此，无论您想在哪里渲染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 receives all the props passed from within the Clock component. Since that’s JavaScript object, we can use the Object Spread Operator to already grab the time prop as { time }.

Do you see the power of Scoped Slots? You can do more powerful stuff, like render-less components, that you’ll see in a future tip 😜.

If you want to run the code yourself, you can find it in this CodeSandbox!