Vue——组件5:插槽的作用

131 阅读2分钟

插槽:

插槽的作用:

1.显示标签,在组件内部通过<slot></slot>进行接收

2.命名插槽,增加插槽的灵活性

3.带参数的插槽,将插槽中的数据使用组件内部的数据

引言:

当我们在组件标签内部再嵌套一些其他标签或者写一些文本,我们会发现这些标签、文本都无法显示(也就是在组件标签内部进行任何操作,都是无法显示的)

image.png

代码运行结果:

image.png

如何使用插槽及好处

1.插槽的基本使用:

若组件标签内部嵌套一些其它标签的时候,这些标签无法显示,若要显示的话,在组件内部通过<slot></slot>进行接收,slot会将所有标签在同一个位置全部进行接收显示(也就是将所有在组件标签内部嵌套的标签全部嵌套在组件内的<slot></slot>标签内部)

好处:

  • 就是在子组件内留一个空白位置,当需要根组件需要改变子组件时,就可以直接在根组件内直接添加标签或进行其他操作 ,又因为组件具有模块化,可以进行复用,每一次复用时,就可以直接在根组件内直接进行操作,不需要改子组件。

  • 毕竟改变子组件比较麻烦,改变子组件会导致其他这个子组件的复用不满足要求,又需要改变,但插槽的出现,我们就可以直接在根组件上对子组件的复用的各个组件标签内部进行操作

image.png

image.png

我们会发现和上面几乎一模一样的代码,只是在子组件内部标签中添加了一个<slot></slot>标签,代码运行的结果不一样。

代码运行结果:

image.png

2.命名插槽(也叫具名插槽)

1.在组件标签内的标签中添加slot属性,属性值为插槽名称(v-slot:的语法糖:#

  //具名插槽:必须要这样使用:
  //就是在组件标签内部添加一个template标签
  //在template标签在添加v-slot属性,属性值为插槽名称
  <template v-slot:s1>
    <a href="">26</a>
  </template>

2.在组件内部通过name进行接收

 //组件内部的name属性值必须与根组件上插槽名称一致,才能接收到在根组件中具体添加的标签
 //然后再嵌套在slot标签中
 <slot name="s1"></slot>
 

好处:可以增加插槽的灵活性

image.png

通过下面的运行结果,和上面的代码,我们可以知道插槽都是对应着的插槽名的,并且根组件中组件标签内部添加的标签的执行顺序是由组件内部插槽slot的位置决定的。

代码运行结果:

image.png

3.作用域插槽:带参数的插槽

有兴趣,自己去研究