Vue的作用域插槽(slot)
父组件中向子组件的slot插入内容一般只能使用父组件本身的数据,如果想要在父组件中使用子组件中的数据作为内容插入子组件的slot该怎么办。
这个时候就要用到作用域插槽了。
procedure
- 子组件写好slot标签,父组件写好v-slot。
- 子组件slot标签绑定属性(属性名无所谓),属性值为子组件的data中的变量。
- 父组件以
#slotname="childvalue"
的形式接收到子组件中的数据。 - 父组件在v-slot标签内使用
的方式向子组件slot中插入数据。
code
child.vue:
1 | <template> |
parent.vue:
1 | <template> |