如子组件:

父组件引入

如上的div部分会被插入到上面的slot插槽之中

上面部分针对于没有写name的slot标签 一般情况下要增加name属性来实现具名插槽,如下:

子组件:

header.vue

layout.vue

如果使用具名插槽必须使用template插入内容,没有具名属性的时候只是name为default省略了

一般element的组件库有使用插槽的地方就是源码的子组件有标签

如果需要给子组件传值需要使用

注意区别对待v-slot="" 和v-slot:name

=和:的区别 一个是slot的name 一个是父组件获取子组件的数据

v-slot:才与#相等 v-slot=是代表着传值 v-slot:hearder="data" == #hearder="data"