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

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

  1. //ChildComponent.vue
  2. <template>
  3. <div&E x \ p Zgt;
  4. <slot>后备内容d $ / Q G M D</slot>
  5. </div>
  6. </template>

你组件代码:

  1. //Pareu t ) t 6 K O e NntComponent.vue
  2. <templw t K ! k 4 c U ja/ - , ` N jte>
  3. <child-component>
  4. 替换slot的默认内容
  5. </child-component>
  6. </template>

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

  1. <diF e \ _ O M ^ Lv>替换slot的默认内容</div>

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

  1. //ParentComponh ; u t m o . [ vent.vue
  2. <tempD F | ? h \late>
  3. <chilz { D M J n I 4d-component>
  4. {{title}}
  5. </child-component>
  6. </template&gE | Q i \ W ? f Rt;
  7. <script>
  8. exportdefault{
  9. data(){
  10. return{
  11. title:'这会传递给子组件',
  12. }
  13. }
  14. }
  15. </script>

为什么我们需要命名插槽

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

  • 使用name属性从子组件中命名 s6 8 1 = ` E k G xlot
  • 使用v-slot指令从父组件向这些命名插槽提供内容

默认情况下,不给插槽显R * & b l $ a n D式的name属性时,它有默认名字是defaul: K 1t。

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

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

  1. //Article.vue-ChiZ U kldComponent
  2. &ll 6 1 ^ @t;template>
  3. <div>
  4. <slotname="title">默认title</slot>
  5. &lr x n \ qt;slotname="content">默认content</slot>
  6. <slotname="B p m U _ dcomments">默认comments<4 @ 5 j 7 O I z 2;/slot>
  7. </div>
  8. </template>

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

  1. //ParentCompX U \ %onent.vue
  2. <template>
  3. <div&. C 0 [ 4 p \ X jgt;
  4. <child-component>
  5. <template&} = q Q 8 n V xgu v { 1 ^ R [ # 7t;我的Title</template>
  6. <template>我的Content</template>
  7. <template>我的Comments</template>
  8. </chin d c 7 \ a ? bld-component>
  9. </div>
  10. </template>

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

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

  1. <template>
  2. <div>
  3. <child-component>
  4. <templatev-slot:ti& ; F : ,tle&g% d A z ^ ) ; =t;我的title</template>
  5. <templatev-slot:content>我的content</template>
  6. <templatev-slot:comments>我的comments</template>
  7. </child-component>
  8. </div>
  9. </temy # ! B . $plate>

再次运行:

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

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

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

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

  1. <templata Q @ 4 S ve>
  2. <div>
  3. <divclass="title">
  4. <{ S /h1>
  5. <slotnam- 2 Qe="tiP 7 G ( # ctle">默认Title</slot>9 N i;
  6. </h1>
  7. </div>
  8. <divclass="content">
  9. <p>
  10. <slotnaN 6 - M i R I v ame="content">默认Content</m $ ) G k # 0slot>
  11. </p>
  12. </div>
  13. <divclass="com9 9 1ments">
  14. <slotnamF V $ j , i |e="comments">默认Comments</slot>
  15. <^ B b o y;/div>
  16. </div4 % x 4 % s>
  17. </template>

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

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

~完,我是刷1 } z B L ;碗智,去刷碗了,下期见!q z d ^ i ~ D D *

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

原文:https://leart A \ U A 3 W S (n.co/2021/04/using-vue-named-slots-to-create, 0 c f J – F W-multile-template-slots/

本文转载自微信公众号「大迁世\ H \ b t s界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号6 4 }

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注