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

Data Provider component in Vue.js

使用Vue.js等基于组件的技术，并不意味着所有组件都必须基于UI。

实际上，我最喜欢的在大型应用程序中应用高级可重用性的方法是使用组件组成。

如您在“在Vue.js中使用作用域插槽”中所见，有了作用域插槽，您可以将逻辑封装在另一个组件中，并通过props将其传递给插槽。这样，您可以通过组合多个组件来组成新组件的UI和行为。

Withscoped slots, as you haven seen in“Using scoped slots in Vue.js”, you can encapsulate logic in another component and pass it to a slot via props. That allows you to compose the UI and behaviour of a new component by combining multiple of them.

今天，我将向您展示一个数据提供程序组件示例。 数据提供程序是一个无需渲染的组件，这意味着它无需渲染任何内容。

创建无渲染组件的基础是从渲染函数创建一个有作用域的插槽并将任何支持传递给它：

render() {
  return this.$scopedSlots.default({
    loading: !this.loaded,
    data: this.data
  });
}

Due to aninconsistency on scoped slots(fixed by version 2.6), you can better do it like this to make it work in any case:

render() {
  const slot = this.$scopedSlots.default({
    loading: !this.loaded,
    data: this.data
  });

  return Array.isArray(slot) ? slot[0] : slot;
}

知道这一点，要创建数据提供者组件，必须在创建组件时执行ajax / fetch调用，然后将该数据传递给作用域插槽。

DataProvider.js的最终版本可能是：

import axios from "axios";

export default {
  props: ["url"],
  data: () => ({
    data: null,
    loaded: false
  }),
  created() {
    axios.get(this.url).then(({ data }) => {
      this.data = data;
      this.loaded = true;
    });
  },
  render() {
    const slot = this.$scopedSlots.default({
      loading: !this.loaded,
      data: this.data
    });

    return Array.isArray(slot) ? slot[0] : slot;
  }
};

请注意，这是一个.js文件。由于它只是组件的脚本部分，因此它不必是.vue文件。

数据提供程序组件也处于加载状态，因此您可以根据该状态使用该状态来呈现不同的UI。例如：

<template>
  <DataProvider url="https://jsonplaceholder.typicode.com/users">
    <div v-slot="{ data, loading }">
      <div v-if="loading">Loading...</div>
      <div v-else>
        <h2>Result: {{ data.length }} users</h2>
        <p v-for="user in data" :key="user.id">{{ user.name }}</p>
      </div>
    </div>
  </DataProvider>
</template>

That’s it!

If you want to check this example running, go to this CodeSandbox!