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']
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;
    }
}
上一篇下一篇

猜你喜欢

热点阅读