当我们使用组件式编程技术时，例如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
