模板Vue.component的使用 父件参数传递

1、前端HTML页面

//HTML
<hm-ui-notify ref="uinotify" :delay="5000"></hm-ui-notify>
//js
that.$refs.uinotify.Open("err:"+response.message); //uinotify对应上句标签里的参数

2、模板

<script type="text/javascript">
    "use strict";

    Vue.component('hm-ui-notify', {
        template    : '#hmUiNotify',
        props       : {
            delay   : {   //delay对应前端:delay="5000"   
                type    : Number,
                default : 2000
            }
        },
        data() {
            return {
                show    : false,
                message : null
            }
        },
        watch   : {
            'show'  : {
                handler: function(val) {
                    if (val) {
                        setTimeout(() => {this.show = false;}, this.delay);
                    } else {
                        this.message = null;
                    }
                },
                deep   : false
            },
        },
        methods: {
            // Alert 消息提示
            Open(notify) {  //对应前端open
                this.show = true;
                this.message = notify;
            },

            incrementCounter: function () {
                this.counter += 1
                this.$emit('increment');
            }
        },
    });
</script>