【译】Vue实用笔记（二十四）：Vue中的提供数据组件

当我们使用组件式编程技术时，例如Vue，并不意味这每个组件都要有UI的内容。

实际上，在大型应用中，我最喜欢的提升重用性的方法是 组件积木

使用 scoped slots，假设你已经看了上一个实用笔记【译】Vue实用笔记（二十三）：如何使用scoped solts，你可以通过传递一个props的方式，在一个父组件中实用子组件的数据。这允许我们通过合并他们的方式把一个组成一个新的UI和行为组件。

今天我们会展示一个Data provider Component的例子

数据提供层是一个 无UI组件，这意味着，他不要渲染任何内容。

创建一个无UI组件的基础是在一个render方法中创建一个scoped slot并且传递给它一些props：

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

因为inconsistency on scoped slots (fixed by version 2.6)，你还可以这样做：

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

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

了解了上面的知识，创建一个数据提供组件的时候，我们最好在它的生命周期crated执行一个ajax，然后把这个数据通过prop传递给scoped slot。

一个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文件，因为这个组件只有script部分，不需要用一个.vue 文件。

数据提供组件也控制加载状态，所以你可以根据不同的状态，加载不同的组件。一个简单的例子如下：

<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>

以上就是今天的全部内容了。

如果你想自己写代码，请点击 CodeSandbox!

Don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

See you next week.

Alex