vue 2.6 插槽更新 v-slot 用法总结

Posted 2023-03-14

参考技术A 引vue官方文档
之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~

我的理解就是
父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置
(匿名插槽,具名插槽)

插槽一共就三大类
1.匿名插槽(也叫默认插槽): 没有命名,有且只有一个
2.具名插槽: 相对匿名插槽组件slot标签带name命名的
3.作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

用法:我的理解,匿名插糟只需要一个.(就是这些,不太复杂)
父页面:

子组件 todoList.vue

用法:我的理解,和匿名插槽比较,就是必须起名todo对应,可以有多个具名插槽.(没了~)
父页面

子组件

对 v-slot:todo 做操作:

匿名如果想用必须加上default

1.重点是slotProps接取子组件里:user="user" :test="test"类似属性的数据
父页面

子组件

父页面 (子组件不变 显示一样)

参数值替换名字(可以后看)

独占默认插槽缩写(可以后看)
感觉没什么机会用,限制条件太多

在用上v-slot之后 只需要考虑好
1.是否需要命名(匿名插槽,具名插槽)
2.父页面是否需要取存在子页面的数据(作用域插槽)

可以试一下,便于理解~
父页面

子组件