vue2 插槽的写法大全

插槽的写法大全

刚做完一个项目，被库里的各种插槽搞的头疼，今天专门总结一下各种写法，不涉及原理。

1.匿名插槽

子组件 test.vue

	插槽
	当没有使用插槽时，这里可以放置默认内容

父组件 App.vue

	hello

注意：多个匿名插槽 默认会将子组件标签中的内容全部渲染到每个匿名插槽

2.具名插槽

子组件 test.vue

	插槽

具名插槽的四种写法

	写法1
	具名插槽1
	写法2
	写法3
	写法4

3.作用域插槽

子组件 test.vue

	插槽

父组件

	写法1
	写法2
	写法3

需要注意的是，虽然在所有的 2.x 版本中 slot 和 slot-scope  仍被支持。但实际上已经被官方废弃且不会出现在 Vue 3 ，所以这里更推荐小伙伴们使用v-slot替代slot 和 slot-scope指令。