vue插槽slot怎么用-创新互联
这篇文章给大家分享的是有关vue插槽slot怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联建站是专业的石楼网站建设公司,石楼接单;提供成都网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行石楼网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!前言
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怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站题目:vue插槽slot怎么用-创新互联
文章来源:http://pwwzsj.com/article/ccoshe.html