slot 插槽 、 provide、工具函数写法
2020-04-26 本文已影响0人
_前端码农_
vue v2.6中,引入了v-slot,它取代了slot和slot-scope,v-slot限用于template和组件上
// 模板中
<template name="header"></template>
<template name="content" :myData="test"></template>
// 使用时
<template v-slot:header>
<p>Heres some contact info</p>
</template>
<template v-slot:content="slotprops">
<h1>{{slotprops.test}}</h1>
</template>
作用域插槽, 父组件需要子组件的值时使用, 不能有name属性
<slot bbb="aaa"></slot> // 不能有name属性
// 祖先组件
provide(){
return {
yeye:this,
value:this.value
}
}
// 子孙组件
inject:['yeye']
- $emit
new Vue({
data(){
return {
message: 'hello vue'
}
},
created(){
// this.$on(事件名, callback)
this.$on('my_events', this.handleEvents) // 定义一个事件,并指定事件的执行对象(执行函数)
// this.$on('my_events', this.handleEvents2) // 可以为一个事件,添加多个方法
// this.$on(['my_events', 'my_events2'], this.handleEvents) // 也可以绑定多个事件
},
methods:{
handleEvents(e) {
console.log(this.message, e)
},
handleEvents2(e) {
console.log(this.message, e)
},
boost() {
this.$emit('my_events', 'my params') // 事件名, 要传递的数据
}
}
})
export default {
dateFormat(fmt, date) {
date = new Date(date)
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (let k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
}