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

相关推荐
gnip7 分钟前
总结一期正则表达式
javascript·正则表达式
Q_9709563910 分钟前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员24 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘29 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出31 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的31 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解34 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵37 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im38 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man38 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js