this.error = err
this.resolved = true
})
},
immediate: true
}
}
}
</script>
这是怎么回事,小老弟?首先，请注意，该组件接收一个Promise 类型参数。在 watch 部分中，监听 promise 的变化，当 promise 发生变化时，清除状态，然后调用 then 并 catch promise，当 promise 成功完成或失败时更新状态。
然后，在模板中，我们根据状态显示一个不同的槽。请注意，我们没有保持它真正的无渲染，因为我们需要一个根元素来使用模板。我们还将 data 和 error 传递到相关的插槽范围。
<template>
<div>
<promised :promise="somePromise">
<template #resolved="{ data }">
Resolved: {{ data }}
</template>
<template #rejected="{ error }">
Rejected: {{ error }}
</template>
<template #pending>
请求中...
</template>
</promised>
</div>
</template>
...我们将 somePromise 传递给无渲染组件。 然后等待它完成，对于 pending 的插槽，显示“请求中…”。 如果成功，显示“Resolved：对应的值”。 如果失败，显示“已Rejected：失败的原因”。 现在我们不再需要跟踪此组件中的 promise 的状态，因为该部分被拉出到它自己的可重用组件中。
那么，我们可以做些什么来绕过 promised.vue 中的插槽？ 要删除它，我们需要删除 template 部分并向我们的组件添加 render 函数：
render () {
if (this.error) {
return this.$scopedSlots['rejected']({error: this.error})
} if (this.resolved) {
return this.$scopedSlots['resolved']({data: this.data})
}
return this.$scopedSlots['pending']()
}
这里没有什么太复杂的。我们只是使用一些 if 块来查找状态，然后返回正确的作用域 slot (通过 this.$ scopedslot [‘SLOTNAME’](…) )，并将相关数据传递到 slot 作用域。当你不使用模板时，可以跳过使用 .vue 文件扩展名，方法是将JavaScript从 script 标记中提取出来，然后将其放入 .js 文件中。在编译这些Vue文件时，这应该会给你带来非常小的性能提升。
总结
Vue的插槽将基于组件的开发提升到了一个全新的水平，虽然本文已经展示了许多可以使用插槽的好方法，但还有更多的插槽。
以上所述是小编给大家介绍的vue 2.6 中 slot 的新用法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
