极简之vue插槽的快速了解与应用😄

举报
北极光之夜。 发表于 2021/08/22 21:56:31 2021/08/22
【摘要】 🌻你好呀(*´▽`)ノノ。vue插槽是比较常见的一个知识点,所以下面快速的介绍下它的用法。简单来说,vue插槽的作用就是父组件可以向子组件传递内容,同时,他还可以扩展、复用和定制组件。

一.速度上手:

   🌻你好呀(*´▽`)ノノ。vue插槽是比较常见的一个知识点,所以下面快速的介绍下它的用法。简单来说,vue插槽的作用就是父组件可以向子组件传递内容,同时,他还可以扩展、复用和定制组件。

  什么意思?比如我定义了一个父组件和一个子组件,当我在父组件里引用的子组件标签里写的内容是显示不出来的。如下:
  比如,有一个 Father.vue的组件,它引入了子组件Children.vue,同时在子组件标签里定义了一个h1标题。

<template>
  <div>
    此乃父组件区域
    <hr />
    <Children>
      <h1>我乃父组件书写的内容</h1>
    </Children>
  </div>
</template>

子组件Children.vue内容:

<template>
  <div>
    此乃子组件区域
    <slot></slot>
  </div>
</template>

运行效果如下,自然定义的h1标签里的内容不会显示:

在这里插入图片描述
但是,当我在子组件Children.vue里定义一个slot插槽,它便可以显示父组件书写的内容:

修改子组件Children.vue内容:

<template>
  <div>
    此乃子组件区域
    <slot></slot>
  </div>
</template>

看运行效果,子组件区域显示了h1标签里的内容:
在这里插入图片描述
所以说,vue插槽的作用就是父组件可以向子组件传递内容。同时,他还可以扩展、复用和定制组件。

复用和定制简单说明:
 如果我父组件在下面重新再重新引入一次子组件,但是这个子组件标签里定义内容不一样,那么它显示的是自己的内容:

<template>
  <div>
    此乃父组件区域
    <hr />
    <Children>
           <h1>我乃父组件书写的内容1</h1>
    </Children>
    <Children>
           <h1>我乃父组件书写的内容2</h1>
    </Children>
  </div>
</template>

效果如下,自己显示自己的内容:
在这里插入图片描述

二.插槽类型:

1. 默认插槽:

  很简单,就是如果我在子组件的< slot >< slot >插槽可以定义一些默认内容,如果父组件引入子组件然后什么都没写,那么显示默认值,如果父组件那写了,覆盖掉默认值:

在子组件插槽里写点内容:

<template>
  <div>
    此乃子组件区域
    <slot>
      <h1>吾乃插槽默认内容</h1>
    </slot>
  </div>
</template>

父组件只是引用子组件:

<template>
  <div>
    此乃父组件区域
    <hr />
    <Children></Children>
  </div>
</template>

此时会显示默认内容:

在这里插入图片描述
但是,如果在父组件里写了内容,那么会传递给子组件的插槽,并覆盖掉默认值:

<template>
  <div>
    此乃父组件区域
    <hr />
    <Children>
      <h1>吾乃传递给子组件的内容</h1>
    </Children>
  </div>
</template>

子组件不变:

<template>
  <div>
    此乃子组件区域
    <slot>
      <h1>吾乃插槽默认内容</h1>
    </slot>
  </div>
</template>

默认值被覆盖掉:
在这里插入图片描述

2.具名插槽:

顾名思义,就是给插槽起名。当有多个插槽时,肯定得定义名字来区分,看看你想显示什么内容。

比如,我在子组件里定义了3个插槽,并给它们默认值,同时通过 name=名字 属性给他们定义姓名:

<template>
  <div>
    此乃子组件区域
    <slot name="one">
      <h1>吾乃插槽默认内容一号</h1>
    </slot>
    <slot name="two">
      <h1>吾乃插槽默认内容二号</h1>
    </slot>
    <slot name="three" ee>
      <h1>吾乃插槽默认内容三号</h1>
    </slot>
  </div>
</template>

  那么,我们在父组件引入子组件时,要传递的内容可以指定给某个具体的插槽。写法为把传递内容都写在< template >< template/ > 里,同时通过v-slot:插槽名字来实现效果,如下,写两份内容,分别让不同插槽接收它们:

<template>
  <div>
    此乃父组件区域
    <hr />
    <Children>
      <template v-slot:one>
        <h1>插槽一号显示我</h1>
      </template>
      <template v-slot:two>
        <h2>插槽二号显示我</h2>
      </template>
    </Children>
  </div>
</template>

效果如下,没人传递给插槽three,所以它还是默认值:
在这里插入图片描述

简写形式,如 v-slot:one 可以简写为 #one

3.作用域插槽:

  简单来说就是子组件作用域的数据能传递给父组件,并且在父组件的引入的子组件的标签里可以引用,那么它也就可以覆盖掉子组件里插槽的默认值。直接上例子,如下:

在子组件定义了一个变量blog,值为"北极光之夜。",我们可以把这个blog的值传递给父组件接收,写法如下:

在插槽里定义 v-bind:自定义一个名称 = “ 要传递的值 ”

如我自定义一个giveBlog,同时传递 blog这个变量的值:

<template>
  <div>
    此乃子组件区域
    <slot v-bind:giveBlog="blog">
      <h1>吾乃插槽默认内容</h1>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blog: "北极光之夜。",
    };
  },
};
</script>

父组件接收方法如下,要在template标签里写:

v-slot:default=“自定义一个名称”
引用 {{ 自定义名称 .子组件自定义的名称 }}

如下,引用那个blog的数值:

<template>
  <div>
    此乃父组件区域
    <hr />
    <Children>
      <template v-slot:default="getBlog">
        {{ getBlog.giveBlog }}
      </template>
    </Children>
  </div>
</template>

看,效果如下,变量blog的值显示了:

在这里插入图片描述

注意,v-slot:default=“getBlog” 里的 default 表示默认,如果插槽有名字,那么替换为插槽的名字即可。

三.总结:

  🌊🌊🌊上面就是 vue 插槽的一些简简单单的介绍的内容啦,总结起来就是,vue插槽的作用为父组件可以向子组件传递内容。同时,它还可以扩展、复用和定制组件。其中主要通过 slot 的不同形式的用法实现效果。那么,下次见啦,ヾ( ̄▽ ̄)ByeBye ~

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。