大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍“vue组件化中slot如何用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue组件化中slot如何用”文章能帮助大家解决问题。
创新互联网站建设提供从项目策划、软件开发,软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务,主营业务为成都网站建设、成都网站设计,成都App制作以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。创新互联深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
前言
slot可以在子组件中开启插槽,在父组件引用该组建时,可以定义这个插槽内要展现的功能或模块。
1.单个slot
子组件中在相应位置写slot标签,父组件在引用子组件时,在子组件标签内写要插入插槽的元素;
还可以设置slot在父组件没有设置插槽时,子组件的插槽默认显示内容;
父组件.vue
这是父组件的slot替代内容!
子组件childComponment.vue
这是子组件childComponment!
如果父组件没有插入内容,我这样可以设置默认的显示内容
2.具名slot(同时使用多个插槽)
给slot指定一个名称,可以分发多个slot插槽,但是只能有一个无名slot;
父组件的slot插槽内容,不写slot="xxx"的都会插到子组件的无名slot中;
如果没有指定无名slot(默认slot),父组件内多余的内容将会被抛弃。
父组件的header
父组件的footer 父组件的无名slot-1 父组件的无名slot-2
子组件
这是子组件childComponment的正常内容!子组件默认header-slot 子组件默认无名slot 子组件默认footer-slot
3.作用域插槽
{{slotProps}}
子组件
这是子组件childComponment的正常内容!
Tips:
作用于插槽也可是具名插槽
案例:列表组件
这是作用于插槽使用最多的案例,允许组件自定义应该如何渲染组件的每一项。
This is about page
{{myListProps.bookName}}
子组件myList.vue
This is myList page
其实上面的案例可直接在父组件中for循环就好,此处只是作为演示slot的作用域插槽;
实际开发中作用域插槽的使用场景主要为:既可以复用子组件的slot,又可以使slot内容不一致。
4.访问slot
vue2.0提供了$slot方法来访问slot
此处代码以**“具名slot(同时使用多个插槽)”**的代码为例,修改一下子组件childComponment.vue
export default { name: "childComponment", data(){ return { message: '' } }, mounted(){ let header = this.$slots.header let main = this.$slots.default let footer = this.$slots.footer console.log(header) console.log(main) console.log(footer) console.log(footer[0].elm.innerHTML) } };
打印结果:
其中elm的内容为插槽内容,结构如下:
关于“vue组件化中slot如何用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。