- 组件插槽
匿名插槽
默认情况下不能在子组件标签中额外**(不是子组件的标签原有的)**添加其他元素的，像是这样 ↓ 默认不行
但是有时候，我们希望能够动态地为组件添加内容– 注意： 具名插槽 通过设置 设置插槽名后即可通过– 注意：默认添加的内容不会被填充到具名插槽中，只有为其指定要填充的插槽名才可以。 2. v-slot 在 Vue2.6 后，给出了另一种为添加的内容指定插槽的方式–在 注意： 相当于用 如何使用– 或者简单一些– 实现父子组件方法通信，在父组件实现一个方法，子组件数据变动时，调用该方法，将新数据作为参数传给父组件。父组件就可以为所欲为了。1
<son><div></div></son>
使用组件插槽 ：在子组件的<template>中添加<slot>标签
<slot>标签内可以设置默认数据，展示插槽未激活状态：<slot>默认数据</slot>
<son></son>之间填充的内容会显示N个
<slot>的 name 属性定义插槽名，如:1
2<slot name="slot-one"></slot>
<slot name="slot-two"></slot>
设置添加的元素的slot 属性，指定添加的内容填充哪个插槽，如：1
<son><div slot="slot-one"></div></son><template>上使用v-slot 指令
<template>上v-slot缩写为#1
2
3
4<template v-slot:插槽名> //同其他指令，不用加引号
<div></div>
<div></div>
</template><template>将添加的内容包裹，为其中的内容统一指定插槽。 3. 作用域插槽
v-bind:数据名="数据名"的形式暴露数据给父组件<template slot-scope="自定义的作用域名">接收数据<template>添加内容<template>内通过作用域名.数据名的方式调用
<template #插槽名="作用域名">接收数据(用v-slot替代slot-scope)
评论