美文网首页
slot 插槽 、 provide、工具函数写法

slot 插槽 、 provide、工具函数写法

作者: _前端码农_ | 来源:发表于2020-04-26 14:47 被阅读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;
        }
    }
    

    相关文章

      网友评论

          本文标题:slot 插槽 、 provide、工具函数写法

          本文链接:https://www.haomeiwen.com/subject/szodwhtx.html