Vue slot插槽的基本使用

一.slot基本规则的使用:

1. vue官方规定:每个slot插槽,都要有一个name名称
2. 如果省略了slot的name属性,则有一个默认名称叫做default 
3. <slot name="default"></slot>

实际截图

image.png

二.标签放到指定的插槽中

image.png

三.v-slot: 的简写方式是:

image.png

四.v-slot:插槽指定的默认内容

如果父组件没有指定内容,v-slot就会用自己内部默认的参数,如果父组件有指定的内容,那么他就会用父组件中指定的内容

image.png

五.具名插槽的使用(具名插槽:就是带名字的)具体实现的步骤:

image.png

六.作用域插槽的基本使用:

需求: 在子组件的插槽中写上一个msg="hello Vue",想在父组件中拿到msg的值

image.png

注意: 如果子组件的slot中不传递数据的话,他得到的就是一个空对象

七.作用域插槽多个传值和传递对象的解构赋值

1.多个值的传递也是这样写,因为这个得到的就是一个大的对象,不管子组件中你传了多少数据,最后得到的都是一个对象返回过来

2. 那边传递过来的是一个大对象,可以使用对象的解构赋值

image.png

八. 根据插槽来优化购物车案例

image.png