Vue中slot插槽

140 阅读2分钟
插槽:1、插槽(Slot)是Vue提出来的⼀个概念,正如名字⼀样,插槽⽤于决定将所携带的内容,插⼊到指定的某个位置,
从⽽使模板分块,具有模块化的特质和更⼤的重⽤性。 插槽显不显示、怎样显示是由⽗组件来控制的,⽽插槽在哪⾥显示
就由⼦组件来进⾏控制

匿名插槽:
	没有给slot插槽设置name属性就叫匿名插槽,在使用子组件的时候,在子组件中写的结构默认会覆盖所有匿名slot
    位置,可以在slot中添加默认内容
	<slot>添加默认值</slot>
	一个组件中,匿名插槽一般只有一个匿名插槽可以设置默认值,如果没有指定内容,则使用默认值,如果指定的内
    容就使用内容覆盖插槽位置
具名插槽:
	为slot设置name属性,就叫具名插槽<slot name='left'></slot>在使用子组件的时候,配合template标签为插槽
    设置内容,,通过v-slot:插槽名称来指定内容覆盖那一个插槽
	v-slot:可以简写为#
	<template #left>后退</template>
	一个组件中,可以有多个具名插槽,匿名插槽可以设置默认值,如果没有指定内容
    ,则使用默认值,如果指定的内容就使用内容覆盖插槽位置
作用域插槽:
	作用:可以提升组件渲染的灵活性,渲染的方式和父组件来决定,通过插槽可以将子组件的数据传递给父组件
	实现方式:
            在子组件中添加slot,在slot上绑定数据<slot name='myslot' :data='myname' aa='qq' cc='tt'></slot>
     在父组件中使用子组件的位置。通过 v-slot:插槽名称=‘变量名称’ 可以接收到子组件通过插槽传递的所有数据,生
     成一个对象,在父组件中接收数据的时候可以使用解构
            <myscope #myslot='scope'><p>{{scope}}</p></myscope>
            或者
            在⼦组件的slot标签上绑定需要的值<slot :data="user"></slot>在⽗组件上使⽤slot-scope=“user”来接收
      ⼦组件传过来的值