插槽含义:就是引入子组件后,在插入子组件元素中添加信息或者标签,使得子组件的指定位置插入信息或者标签
插槽有三种:默认插槽、具名插槽、作用域插槽,由于vue2.6.0后对插槽进行修改,但是兼容2.6.0前的版本,博文中只说明2.6.0后的插槽,vue3.0后面会去除2.60前的版本兼容
一、默认插槽
默认插槽这是一个默认插槽
这是标签h3
//子组件
Vue.component('tode-item', {
template: `
这里面是slot的默认值//当引入组件的地方没有写插槽内容,将显示子组件插槽中默认的值,如果没有默认值也没用写插槽内容,则插槽内容为空。
});var app = newVue({
el:"#app",
data: {
message:'hello world!'}
});
二、具名插槽: 子组件中有多个插槽,通过给插槽指定名称方式实现一 一对应。
具名插槽nihao
hi
nihao
hi
template: `
这是第一个具名插槽
这是第二个具名插槽
})
let app= newVue({
el:"#app",
data: {
}
})
三、作用域插槽:把子组件data中的数据或者子组件props中的数据传到父组件的插槽中使用
1) 两个属性合并成了一个 v-slot : 插槽名称 = ' 传过来的值 ' 。
2) 组件页面中slot的内容没有变化 。
3) v-slot 不能用在 html 标签上 。
4) 如果是默认插槽 可以写成 v-slot='xxx'。
5) 还增加了 可以解构插槽props 和 设置默认值的内容,具体的可以查看官网 解构插槽
作用域插槽{{val.send.text}}
template: `
props:['message'],
data(){return{
list:[
{"id":10,"text":"苹果"},{"id":20,"text":"香蕉"},{"id":30,"text":"梨"},{"id":40,"text":"芒果"},
]
}
}
})
let app= newVue({
el:"#app",
data: {
msg:'这是动态传入的slot的内容',
}
})
4. 新增的还有 动态插槽名
什么是动态插槽名?大致就是动态指令参数也可以用在v-slot上,这个就要涉及到2.6.0新增的 动态参数
xxx
这个 attrContent 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。 比如这里attrContent 最终的值为 default 则渲染出来的结果 就是 v-slot:default='msg' 。
注意:
1) 单独在 [ ] 方括号中也可以使用表达式,但是不能存在引号和空格
2) 当然 这个动态的值 可以通过 方法,计算属性,或者 data数据 里面的内容。重要的是这个动态的值 是 引用组件的 作用域。简单点说就是父级组件的作用域。
例如,上面 v-slot:sayWhat='thing' 可以写成:
1) v-slot:[first+sec]='thing' 注意 加号两边不能留空格
2) v-slot:[attr]='thing'
3) v-slot:[attrs]='thing'
4) v-slot:[getattr()]='thing'
export default{
data () {return{
msg:'这是动态传入的slot的内容',
attr:'sayWhat',
first:'say',
sec:'What',
}
},
components:{ slotScope },
computed:{
attrs:function(){return 'sayWhat'}
},
methods:{
getattr(){return 'sayWhat'}
}
}
参考:https://www.cnblogs.com/zjjDaily/p/10518546.html