十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章给大家分享的是有关vue插槽slot怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
双峰网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。成都创新互联公司2013年开创至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。
前言
Vue的slot插槽,可以从字面意思来了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具体的内容来替换代替。根据slot的应用场景可以分为匿名slot和具名slot。
一、个人理解及插槽的使用场景
刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑。既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了。后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去重写子组件是很不明智的一件事,当然也可以将不同之处都写在子组件里,然后通过父组件传来的标识进行选择显示。其实质是对子组件的扩展,通过slot插槽向组件内部指定位置传递内容,即将
二、用于理解的例子
目前还没接触到使用插槽解决实际问题很好的例子,只能这样去为了理解插槽而用,可能并没有很好的利用到插槽的好处。
在父组件定义想要传入子组件作为插槽的内容,App.vue
{{item}}
在子组件利用
{{message}}
三、具体知识点
1、具名插槽
上面的例子只使用了一个slot插槽,但有时我们在一个组件里可能会多处使用插槽,我们希望在不同的插槽处插入不同的内容,此时便需要进行区分,
v-slot 指令,并以 v-slot 的参数的形式写出插槽的名称,使其一一对应。
//一个不带 name 的 出口会带有隐含的名字“default”。
2、作用域插槽
为了使父组件的插槽内容可以使用子组件的数据,可以在
四、自 2.6.0 起有所更新的语法变化
1、带有slot特性的具名插槽
2、带有slot-scope特性的作用域插槽
五、突发奇想的调换
因为看到一个别人写的关于slot的帖子,他应该是写错了插槽在子父组件的内容,这也就相当于从子组件传一个插槽内容给父组件。仔细想想这思路有问题,既然都引用了子组件,父组件便可以访问到子组件的所有内容,现在却非要通过插槽来传递,多此一举。
然后我就试了一下将插槽内容卸载子组件里,果然出现了报错,如下:
- can only appear at the root level inside the receiving the component(slot的只能出现在接受组件的根级别)
也就是只能在父组件使用。
感谢各位的阅读!关于“vue插槽slot怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!