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

最新推荐文章于 2025-02-13 10:44:07 发布

转载最新推荐文章于 2025-02-13 10:44:07 发布 · 4.7k 阅读

VUE 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于Vue.js的自定义通知组件实现。该组件通过设置延迟时间来自定义显示时长，并利用watch监听显示状态，自动关闭通知。文章提供了完整的HTML、JavaScript代码示例，展示了如何在Vue项目中集成并使用这一组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>