vue中events选项与$on监听自定义事件他们的区别与不同,以及$emit与$on之间通信和mounted生命周期钩子函数有哪些作用和属性

events 选项确实曾经被用于监听事件,但它主要用于早期版本的 Vue.js(1.x)中,用于组件之间的通信。在 Vue 2.x 中,events 选项已经被废弃,取而代之的是更强大的 emit 和 on 方法。

使用$emit来监听自定义事件

$emit主要用于组件中监听 DOM 事件。

javascript 复制代码
<div id="app">
	//组件绑定自定义的事件add
    <my-fade @add="handleAdd"></my-fade>
    <ul>
        <li v-for="item in items" :key="item.id">{{ item}}</li>
    </ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            items:[]  
        },
        //注册局部组件
        components:{
            'my-fade':{
            	//组件的模板,绑定一个点击事件并绑定一个函数
                template:'<button @click="sendMessage">发送消息</button>',
                methods:{
                	//绑定的事件函数
                    sendMessage(){
                    	//$emit即是用来触发自定义事件的,这里即是组件上自定义的add事件
                        this.$emit('add','Hello from child component!');
                    }
                }
            }
        },
        methods:{
            handleAdd(msg){
                this.items.push(msg);
            }
        }
    })
</script>
  • 使用 $on 方法监听事件

$on 方法用于在 Vue 实例或组件上监听自定义事件

javascript 复制代码
<div id="app">
    <button @click="triggerEvent">触发事件</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        methods:{
            triggerEvent(){
            	//触发自定义事件custom-event,并发送一个信息
                this.$emit('custom-event','Hello from custom event!');
            }
        },
        //mounted是vue的生命周期钩子函数
        mounted(){
        	//监听custom-event事件,并接受收到一个信息
            this.$on('custom-event',(message)=>{
                alert(`接收到信息:${message}`);
            });
        }
    })
</script>
  • mounted 的作用与 DOM 交互:

在 mounted 钩子中,可以访问到挂载后的 DOM 元素,因为此时 Vue 实例已经与 DOM 完全绑定。

可以通过 this.$el 获取到挂载的根 DOM 元素。

  • 初始化数据:

可以在这个阶段初始化一些数据,尤其是那些需要从后端获取的数据。

例如,发送 HTTP 请求获取初始数据并更新组件的状态。

  • 绑定事件监听器:

可以绑定一些 DOM 事件监听器,例如 addEventListener,用于处理用户的交互操作。

  • 执行动画或过渡效果:

可以在这个阶段触发一些动画或过渡效果,因为此时 DOM 已经渲染完成。

  • mounted 的方法和属性

在 mounted 钩子中,可以使用 Vue 实例的所有方法和属性,例如:

this. e l :获取挂载的根 D O M 元素。 t h i s . el:获取挂载的根 DOM 元素。 this. el:获取挂载的根DOM元素。this.data:访问组件的 data 数据。

this. m e t h o d s :访问组件的 m e t h o d s 方法。 t h i s . methods:访问组件的 methods 方法。 this. methods:访问组件的methods方法。this.emit:触发自定义事件。

this. o n :监听自定义事件。 t h i s . on:监听自定义事件。 this. on:监听自定义事件。this.set:用于设置响应式数据。

this.$nextTick:在 DOM 更新完成后执行回调。

javascript 复制代码
<div id="app">
    <h4>{{message}}</h4>
    <button @click="changeMessage">改变信息</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            message:"hello xiaomin"
        },
        mounted(){
            console.log('Mounted hook called.');
            console.log(this.$el);
            this.fetchData();
            window.addEventListener('resize',this.handleResize);
            this.$nextTick(()=>{
                console.log('Dom updated.');
            });
        },
        methods:{
            fetchData(){
                setTimeout(()=>{
                    this.message='Data loaded from server';
                },10000);
            },
            handleResize(){
                console.log('window resized');
            },
            changeMessage(){
                this.message='Message changed';
            },
            beforeDestroy(){
                window.removeEventListener('resize',this.handleResize);
            }
        }
    })
</script>

总结:

mounted 是 Vue 生命周期中的一个重要钩子,通常用于:

访问和操作 DOM 元素。

初始化数据,尤其是从后端获取数据。

绑定事件监听器。

触发动画或过渡效果。

在使用 mounted 时,需要注意清理绑定的资源(如事件监听器),以避免内存泄漏。

相关推荐
我是日安3 分钟前
从零到一打造 Vue3 响应式系统 Day 18 - Reactive:深入 Proxy 的设计思路
前端·vue.js
你的人类朋友4 分钟前
🍃说说Base64
前端·后端·安全
ze_juejin9 分钟前
Node.js 全局变量完整总结
前端
ttyyttemo10 分钟前
Learn-Jetpack-Compose-By-Example---TextFieldValue
前端
_AaronWong11 分钟前
多页面应用登录状态共享:基于弹出窗口的通用解决方案
前端·javascript·vue.js
六月的可乐12 分钟前
Vue接入AI聊天助手实战
前端·vue.js·人工智能
degree52015 分钟前
Webpack 与 Vite 构建速度对比:冷启动、HMR、打包性能实测分析
前端
猩猩程序员15 分钟前
下一版本 MCP 协议将于2025年11月25日发布
前端
熊猫_豆豆17 分钟前
用MATLAB画一只可爱的小熊
前端·matlab·画图
凯哥197017 分钟前
Vue 3 + Supabase 认证与授权时序最佳实践指南
前端·后端