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

Posted 2021-09-07 北极光之夜。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了极简之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 ~

以上是关于极简之vue插槽的快速了解与应用的主要内容，如果未能解决你的问题，请参考以下文章

极简之SVN使用，入职必备

极简Vue基础指令与方法

Vue Router 导航守卫快速了解与上手应用