vue核心基础-插槽

1.匿名插槽

1.1什么是插槽?
默认情况下使用子组件时在子组件中编写的元素是不会被渲染的
如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽
插槽就是在子组件中放一个"坑", 以后由父组件来"填"

1.2什么是匿名插槽
没有名字的插槽, 会利用使用时指定的能容替换整个插槽

• 注意点: 如果有多个匿名插槽, 每一个匿名插槽都会被指定的内容替换
  虽然写多个匿名插槽不会报错, 但是在企业开发中推荐只能有一个匿名插槽

2具名插槽

2.1什么是具名插槽
默认情况下有多少个匿名插槽, 我们填充的数据就会被拷贝多少份
这导致了所有插槽中填充的内容都是一样的
那么如果我们想给不同的插槽中填充不同的内容怎么办呢?
这个时候就可以使用具名插槽

2.2具名插槽使用
通过插槽的name属性给插槽指定名称
在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽

• 注意点: 如果没有指定要替换哪个插槽中的内容, 则不会被替换

3.v-slot

3.1什么是v-slot指令?
v-slot指令是Vue2.6中用于替代slot属性的一个指令
在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽
从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽

• 注意点: v-slot指令只能用在template标签上
  可以使用#号替代v-slot:

4.作用域插槽

4.1什么是作用域插槽
作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据

4.2如何使用作用域插槽
4.2.1在slot中通过 v-bind:数据名称="数据名称" 方式暴露数据
4.2.2在父组件中通过