1. 什么是插槽
- 插槽(Slot)是vue为组件的封装者提供的能力。
- 允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。
2. 插槽的使用及注意要点
- App.vue为根组件;
- Left.vue为子组件;
- App.vue:
- 默认情况下,在使用组件的时候,提供的内容都会被填充到name为default的插槽之中;
- 如果要把内容填充到指定名称的插槽中,需要使用 v-slot: 这个指令;
- v-slot: 后面跟上插槽的名字;
- v-slot: 指令不能直接用在元素身上,必须用在template标签上(也可以直接用于组件);
- template这个标签,是一个虚拟的标签,只起到包裹性质的作用,不会被渲染为任何实质性的html元素。
- Left.vue:
- vue 官方规定:每一个slot插槽都要有一个name名称;
- 如果省略了slot的name属性,则有一个默认名称叫做default。
效果: