HR招骋微信小程序_详解Vue 匿名、签字和作用域插槽的使用方法

详解Vue 匿名、具名和作用域插槽的使用方法       这篇文章主要介绍了Vue 匿名、具名和作用域插槽的使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法。

匿名插槽

子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽。只要在父元素中插入的内容,默认加入到这个插槽中去。

 template 
 div 
 hello slot 陌生人 /slot 
 /div 
 /template 

这里定义了一个默认插槽,只要往里头丢东西,就会被加入到这个插槽里面

slot 元素里面可以加入一系列后备内容,一旦父元素没有插入任何信息,那么就会渲染后备内容。

 my-comp 
 /my-comp 

如在父组件中使用这个子组件,并插入 oli 字符串,效果如下:

具名插槽

具名插槽可以出现在不同的地方,不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去。

 template 
 div 
 slot name="nav" /slot 
 br/ 
 slot name="content" /slot 
 br/ 
 slot name="footer" /slot 
 /div 
 /template 

比如上述代码定义了三个具名插槽。在父组件中即可使用 slot 属性插入到对应的插槽中:

 template 
 div 
 my-comp 
 template slot="nav" navigator /template 
 template slot="footer" footer /template 
 template slot="content" content /template 
 /my-comp 
 /div 
 /template 

另外,顺序并不重要,content 在 footer 下方但依然能够按照 slot 定义的顺序渲染:

作用域插槽

通常情况下普通的插槽是父组件使用插槽过程中传入东西决定了插槽的内容。但有时我们需要获取到子组件提供的一些数据,那么作用域插槽就排上用场了。

在子组件中创建 slot 并通过 v-bind 绑定数据 prop 的形式传入数据:

slot :data="data" /slot

在组件 data 中创建数据:

export default {
 name: 'MyComp',
 data () {
 return {
 data: { // 内部状态
 username: 'oli'
}

这样就可以在插槽中访问到子元素的数据了:

 template v-slot:default="user" {{user.data.username}} /template 

也可以不书写 default 关键字,默认就是假定对应默认插槽

 template v-slot="user" {{user.data.username}} /template 

使用 v-slot 绑定一个命名空间 user,这样就可以通过 user 对象引用到子组件中传入的数据了

与具名插槽配合时,需要明确书写对应的命名空间:

 template #:one="user" {{user.data.username}} /template 
 template #:another="user" {{user.data.username}} /template 
# 代表 v-slot 的缩写,缩写在有参数的情况下才会生效

动态插槽名

另外,2.6 版本的 vue 还加入了动态插槽名的功能,用来动态的定义插槽名称:

 template #:[dynamicSlotName] /template 

...

凡科抠图:Vue作用域插槽使用实例详解

这次给大家带来Vue作用域插槽使用详解,Vue作用域插槽使用的注意事项有哪些,下面就是实战案例,一起来看一下。

举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作)。而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释。

 !DOCTYPE html 
 htmllang="en" 
 head 
 metacharset="UTF-8" 
 title Vue作用域插槽 /title 
 scriptsrc="vue/2.3.4/vue.js" /script 
 /head 
 body 
 pid="app2" 
 my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2" 
 !-- pro凡科抠图对象接收来自子组件slot的$index参数 -- 
 templateslot="cont"scope="pro凡科抠图" 
 span {{users[pro凡科抠图.$index].id}} /span 
 span {{users[pro凡科抠图.$index].name}} /span 
 span {{users[pro凡科抠图.$index].age}} /span 
 !-- 这里可以自定[编辑][删除]按钮的链接和样式 -- 
 a:href="'#edit/id/'+users[pro凡科抠图.$index].id"rel="external nofollow" 编辑 /a 
 a:href="'#del/id/'+users[pro凡科抠图.$index].id"rel="external nofollow" 删除 /a 
 /template 
 /my-stripe-list 
 script 
 ponent('my-stripe-list', {
 /*slot的$index可以传递到父组件中*/
 template: `
 pv-for="(item, index) in items" :style="index % 2 === 0 'background:'+oddBgcolor : 'background:'+evenBgcolor" 
 slotname="cont":$index="index" /slot 
 pro凡科抠图: {
 items: Array,
 oddBgcolor: String,
 evenBgcolor: String
 new Vue({
 el: '#app2',
 data: {
 users: [
 {id: 1, name: '张三', age: 20},
 {id: 2, name: '李四', age: 22},
 {id: 3, name: '王五', age: 27},
 {id: 4, name: '张龙', age: 27},
 {id: 5, name: '赵虎', age: 27}
 /script 
 /body 
 /html 

总结

以上所述是小编给大家介绍的Vue 匿名、具名和作用域插槽的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


相关阅读