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 时,需要注意清理绑定的资源(如事件监听器),以避免内存泄漏。

相关推荐
陈随易7 分钟前
AI新技术VideoTutor,幼儿园操作难度,一句话生成讲解视频
前端·后端·程序员
Pedantic10 分钟前
SwiftUI 按钮Button:完整教程
前端
前端拿破轮12 分钟前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温14 分钟前
DOM元素添加技巧全解析
前端
JSON_L17 分钟前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊17 分钟前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
用户214118326360225 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
奇舞精选33 分钟前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
大模型真好玩39 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫1 小时前
深入理解 JWT:结构、原理与安全隐患全解析
前端