组件进阶(插槽)

插槽的使用

一.默认插槽

是什么:子组件slot('挖坑'),父组件template中添加内容

代码如下:

• 子组件中: 默认内容
• 如果父组件没有添加内容,则是空

二.具名插槽

是什么:一个组件需要多个标签添加的时候,就需要具名插槽,一一对应

代码如下:

-   子组件语法: <slot name='xxx'></slot>
-   父组件添加内容需要对应相应的插槽名 <template v-slot:xxx></template> 
-   也可简写成 <template #xxx></template>
-   设置多个插槽,子组件需要写<slot name='xxx'></slot>多个
-   父组件需要添加几个标签,就需要设置几次 <template #xxx></template>
-   xxx是插槽名

三.作用域插槽

是什么:子组件的值需要传给父组件时需要使用作用域插槽

代码如下:

-   子组件语法: <slot name='插槽名' :row='子组件需要传给父组件的值'></slot>
-   父组件语法: <template  v-slot:'插槽名'='scope'></template> 通过scope拿到子组件的数据
-   父组件使用子组件传过来的数据 scope.row