为什么使用vue的作用域插槽？什么时候使用？

本篇文章带大家详细了解一下vue的作用域插槽。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

Vue插槽是一种将内容从父组件注入子组件的绝佳方法。

下面是一个基本的示例，如果我们不提供父级的任何slot位的内容，刚父级<slot>中的内容就会作为后备内容。

// ChildComponent.vue <template>   <div>      <slot> Fallback Content </slot>   </div> </template>

然后在我们的父组件中:

// ParentComponent.vue <template>    <child-component>       Override fallback content    </child-component> </template>

编译后，我们的DOM将如下所示。

<div> Override fallback content </div>

我们还可以将来自父级作用域的任何数据包在在 slot 内容中。 因此，如果我们的组件有一个名为name的数据字段，我们可以像这样轻松地添加它。

<template>    <child-component>       {{ text }}     </child-component> </template>  <script> export default {    data () {      return {        text: 'hello world',      }    } } </script>

【