何时何地使用Vue的作用域插槽

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

创新互联建站是一家专业提供渝水企业网站建设,专注与成都网站制作、成都网站设计、外贸营销网站建设、H5高端网站建设、小程序制作等业务。10年已为渝水众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

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

 
 
 
 

  
  
  
  
// ChildComponent.vue 
  
  
  
  
 
 
 
 
 

然后在我们的父组件中:

 
 
 
 

  
  
  
  
// ParentComponent.vue 
  
  
  
  
 
 
 
 
 

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

 
 
 
 

  
  
  
  
 Override fallback content 
 
 
 
 
 

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

为什么我们需要作用域插槽

我们来看另一个例子，假设我们有一个ArticleHeader组件，data 中包含了一些文章信息。

 
 
 
 

  
  
  
  
// ArticleHeader.vue 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

我们细看一下 slot 内容，后备内容渲染了 info.title。

在不更改默认后备内容的情况下，我们可以像这样轻松实现此组件。

 
 
 
 

  
  
  
  
// ParentComponent.vue 
  
  
  
  
 
 
 
 
 

在浏览器中，会显示 title。

虽然我们可以通过向槽中添加模板表达式来快速地更改槽中的内容，但如果我们想从子组件中渲染info.description，会发生什么呢?

我们想像用下面的这种方式来做：

 
 
 
 

  
  
  
  
// Doesn't work! 
  
  
  
  
 
 
 
 
 

但是，这样运行后会报错 ：TypeError: Cannot read property ‘description’ of undefined。

这是因为我们的父组件不知道这个info对象是什么。

那么我们该如何解决呢？

引入作用域插槽

简而言之，作用域内的插槽允许我们父组件中的插槽内容访问仅在子组件中找到的数据。 例如，我们可以使用作用域限定的插槽来授予父组件访问info的权限。

我们需要两个步骤来做到这一点：

• 使用v-bind让slot内容可以使用info
• 在父级作用域中使用v-slot访问slot属性

首先，为了使info对父对象可用，我们可以将info对象绑定为插槽上的一个属性。这些有界属性称为slot props。

 
 
 
 

  
  
  
  
// ArticleHeader.vue 
  
  
  
  
 
 
 
 
 

然后，在我们的父组件中，我们可以使用 

现在，我们所有的slot props,（在我们的示例中，仅是 info）将作为article对象的属性提供，并且我们可以轻松地更改我们的slot以显示description内容。

 
 
 
 

  
  
  
  
// ParentComponent.vue