当前位置：首页 > article >正文

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

article 2025/8/14 11:46:17

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

使用$emit来监听自定义事件
$emit主要用于组件中监听 DOM 事件。

<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 实例或组件上监听自定义事件

<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 OM 元素。 t hi s .$ data：访问组件的 data 数据。
this. $m e t h o d s ：访问组件的 m e t h o d s 方法。 t hi s .$ emit：触发自定义事件。
this. $o n ：监听自定义事件。 t hi s .$ set：用于设置响应式数据。
this.$nextTick：在 DOM 更新完成后执行回调。

<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>