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

news2025/6/3 10:46:03

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>