Vue slot插槽的基本使用
作者:
coderhzc | 来源:发表于
2022-01-13 12:00 被阅读0次
一.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
本文标题：Vue slot插槽的基本使用
本文链接：https://www.haomeiwen.com/subject/vckncrtx.html
网友评论