如何使用 Vue 命名插槽创建多个模板插槽?

开发 前端
Vue 插槽允许将父组件中的内容注入到子组件中。这是最基本的示例,如果我们不提供父级的任何slot 内容,则我们将放在其中的任何内容都会作为后备内容。

[[397990]]

Vue 插槽允许将父组件中的内容注入到子组件中。

这是最基本的示例,如果我们不提供父级的任何slot 内容,则我们将放在其中的任何内容都会作为后备内容。

  1. // ChildComponent.vue 
  2. <template> 
  3.   <div> 
  4.      <slot> 后备内容 </slot> 
  5.   </div> 
  6. </template> 

你组件代码:

  1. // ParentComponent.vue 
  2. <template> 
  3.    <child-component> 
  4.       替换 slot 的默认内容 
  5.    </child-component> 
  6. </template> 

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

  1. <div> 替换 slot 的默认内容 </div> 

我们还可以将父组作用域内的任何数据写在 slot 区域中。例如,父组件有一个名为title的数据字段,我们可以使用以下代码将其注入到子组件中:

  1. // ParentComponent.vue 
  2.  
  3. <template> 
  4.    <child-component> 
  5.       {{ title }}  
  6.    </child-component> 
  7. </template> 
  8.  
  9. <script> 
  10. export default { 
  11.    data () { 
  12.      return { 
  13.        title: '这会传递给子组件'
  14.      } 
  15.    } 
  16. </script> 

为什么我们需要命名插槽

在Vue中使用命名插槽有两个步骤:

  • 使用name属性从子组件中命名 slot
  • 使用v-slot指令从父组件向这些命名插槽提供内容

默认情况下,不给插槽显式的name属性时,它有默认名字是default。

为了给我们的 slot 起个名字,元素具有一个特殊的name属性,可以让我们在多个插槽之间进行区分。

在下面的Article.vue 中,我们命名三个 slot

  1. // Article.vue - Child Component 
  2. <template> 
  3.   <div> 
  4.     <slot name="title"> 默认 title </slot> 
  5.     <slot name="content"> 默认 content </slot> 
  6.     <slot name="comments"> 默认 comments</slot> 
  7.   </div> 
  8. </template> 

然后,在父组件中,我们可以在元素上使用v-slot指令指定我们想要注入内容的slot。

  1. // ParentComponent.vue 
  2. <template> 
  3.   <div> 
  4.     <child-component> 
  5.       <template> 我的 Title </template> 
  6.       <template> 我的 Content </template> 
  7.       <template> 我的 Comments </template> 
  8.     </child-component> 
  9.   </div> 
  10. </template> 

因为这是没有指定 slot 的名称,所以显示的是 slot 默认的内容。

要解决这个问题,可以使用v-slot,指定的名称要确保名称与我们在子组件中声明的名称完全匹配。

  1. <template> 
  2.   <div> 
  3.     <child-component> 
  4.       <template v-slot:title> 我的 title </template> 
  5.       <template v-slot:content> 我的 content </template> 
  6.       <template v-slot:comments> 我的 comments </template> 
  7.     </child-component> 
  8.   </div> 
  9. </template> 

再次运行:

使用 Vue 命名插槽有什么意义

命名槽让我们可以使用多个槽,但是为什么这对我们Vue开发人员有用呢。

简而言之,它使我们可以更好地组织开发代码,还可以编写更具扩展性的代码。

就个人而言,我认为最重要的是,它允许我们在代码上使用插槽,从而使样式设计变得更加容易。在我们的示例中,Article.vue子组件只有三个插槽,但是在实际应用中,这些插槽看起来更像这样,以便我们的组件可以向每个部分添加CSS样式。

  1. <template> 
  2.   <div> 
  3.     <div class="title"
  4.       <h1> 
  5.         <slot name="title"> 默认 Title </slot> 
  6.       </h1> 
  7.     </div> 
  8.     <div class="content"
  9.       <p> 
  10.         <slot name="content"> 默认  Content </slot> 
  11.       </p> 
  12.     </div> 
  13.     <div class="comments"
  14.       <slot name="comments"> 默认  Comments </slot> 
  15.     </div> 
  16.   </div> 
  17. </template> 

在此示例中,更容易理解为什么我们需要多个 slot。由于我们注入的内容是通过不同的<div>,<p>和DOM元素彼此分隔的。无法在一个slot中传递所有这些信息。

如果检查DOM,可以看到使用v-slot的模板将内容正确地插入到正确的位置。

~完,我是刷碗智,去刷碗了,下期见!

作者:Matt Maribojoc 译者:前端小智 来源:stackabuse

 

原文:https://learn.co/2021/04/using-vue-named-slots-to-create-multile-template-slots/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2020-05-25 17:03:47

Vue嵌套插槽开发

2024-06-03 10:00:51

Vue 3语法插槽

2021-12-29 07:51:21

Vue3 插件Vue应用

2020-08-10 08:30:35

Vue 数据插槽

2022-07-15 08:45:07

slotVue3

2021-04-14 07:52:00

Vue 作用域插槽

2021-09-03 08:23:21

Vue 插槽子组件

2019-10-15 09:05:07

域插槽组件前端

2022-09-21 11:45:22

Vue组件插槽函数

2022-09-22 08:45:10

Vue组件函数

2012-02-16 10:51:39

AMDOpteron皓龙处理服务器

2021-11-26 10:08:57

鸿蒙HarmonyOS应用

2023-11-06 07:37:01

函数式插槽React

2013-01-06 10:18:40

英特尔Haswell插槽

2010-06-04 15:30:44

Linux 查看内存

2021-09-27 09:04:40

Vue.js代码库开发人员

2013-01-07 10:36:15

Haswell处理器插槽

2020-02-20 12:04:58

CPU性能最优化

2010-01-21 10:20:36

2023-07-25 08:10:36

内存CPU插槽
点赞
收藏

51CTO技术栈公众号