【vue框架】插槽slot的使用

1. 什么是插槽

1. 插槽（Slot）是vue为组件的封装者提供的能力。
2. 允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

2. 插槽的使用及注意要点

• App.vue为根组件；
• Left.vue为子组件；

1. App.vue：
   

• 默认情况下，在使用组件的时候，提供的内容都会被填充到name为default的插槽之中；
• 如果要把内容填充到指定名称的插槽中，需要使用 v-slot： 这个指令；
• v-slot： 后面跟上插槽的名字；
• v-slot： 指令不能直接用在元素身上，必须用在template标签上（也可以直接用于组件）；
• template这个标签，是一个虚拟的标签，只起到包裹性质的作用，不会被渲染为任何实质性的html元素。

2. Left.vue：
   

• vue 官方规定：每一个slot插槽都要有一个name名称；
• 如果省略了slot的name属性，则有一个默认名称叫做default。

效果：