vue插槽的学习(vue2.6.0按照官网一个一个往下看)

我是一个看文档,也很难看懂的人,要是有别人的解说视频,我可能会选择后者,今天自己尝试看了一下插槽部分,有点懵逼


最后还是勉强理解下来,也不知道对不对,做个记录,因为这部分还挺重要的,如有不对,欢迎指出
 

先说一下什么是插槽把,就是和插值一个意思,就像喂猪一样, 插槽就好像 装猪食的槽子, 插值就好像猪食

具名插槽,这个玩意就是带名字的,百度了很多有关插槽的文章,很多都是还有什么匿名插槽
匿名插槽:这个肯定就是不带名字的了,可是我按照他们的做了,2.6.0版本显示不出来,没效果,查阅官网之后,说是不写名字之后,默认带了一个default

ok先简单说到这这里,接下来看看具名插槽

写一个简单的组件

单独执行vue文件(cli3.0新功能):
 

[code]vue serve Test.vue

默认不给插槽传值会出现插槽的默认值

给插槽传值后

此时就会显示传递过去的内容

作用域插槽(就是插槽能获取子组件的数据)
在组件中定义好数据通过v-bind 绑定好数据


这样获取



 

接着来学作用域插槽下的独占默认插槽的缩写语法

具体分析

调用

还可以更加简略,默认插槽不用写:default

这里官网还有个注意事项:我就不实现了,我贴图上来很简单的,就是具名和默认插槽不能混用,会导致作用域问题

如果想混用的话,那就使用完整的template标签包裹

作用域插槽里面的小分支,一起来学习一下

解构插槽的原理:一起来看看官网怎么说

直接开始用起来吧

甚至还可以重名:为了解决一个插槽中提供了很多个prop(标红的这句话不理解的话,我再放个图)

还能提供后备内容(后备内容的意思就是说,假如这个数据没有在子组件中定义 的情况下,默认值才生效)

这样写是会报错的,当然也可能是我自己没搞好, 如果要使用这个后备内容是不能直接把v-slot 写 在组件上的
必须加上template

这个组件中的user我们没有定义

在调用Test.vue的时候我们的后备内容将会被显示



 

动态插槽名(2.6.0新增)
动态指令参数,也可以用在

v-slot

因为定义的那个插槽是默认插槽,会自带一个name为default的值,多以必须定义成default ,当然了你的插槽带别的名字,你这里就要修改成对应的名字否则无法显示

你也可以直接把名字当做参数写出来

具名插槽的缩写(2.6.0新增)
 

插槽就先到这里了吧.我自己看文档过的,感觉也还行