Vue父组件刷新方法详解·prototype·在子组件中使用$emit触发一个事件

Vue父组件刷新方法详解

一、事件总线（Event Bus）

事件总线就像一个交通警察，负责让不同组件之间传递信息。

创建事件总线：在main.js中初始化一个Event Bus实例。

 // main.js import Vue from 'vue'; Vue.prototype.$bus = new Vue(); 

在子组件中发送消息：使用$bus.$emit发送事件。

 // 子组件中 this.$bus.$emit('refreshEvent'); 

在父组件中监听事件：使用$bus.$on监听事件。

 // 父组件中 this.$bus.$on('refreshEvent', this.refreshMethod); 

二、Vuex状态管理

Vuex就像是项目的大脑，管理着所有组件间的状态。

安装Vuex：在项目中安装Vuex。

创建store：定义一个刷新状态。

 // store.js const store = new Vuex.Store({ state: { refreshing: false }, mutations: { setRefreshing(state, status) { state.refreshing = status; } } }); 

在子组件中触发状态改变：通过store.commit改变状态。

 // 子组件中 this.$store.commit('setRefreshing', true); 

在父组件中监听状态变化：使用watch监听状态变化。

 // 父组件中 this.$watch('refreshing', this.refreshMethod); 

三、使用$emit方法

使用$emit就像是在组件间搭了一座桥梁。

在子组件中使用$emit：触发一个事件。

 // 子组件中 this.$emit('refresh'); 

在父组件中监听事件：监听子组件触发的事件。

 // 父组件中 this.$on('refresh', this.refreshMethod); 

四、使用refs属性

refs就像是一个指针，直接指向子组件。

在子组件中定义方法：定义一个方法触发父组件的刷新。

 // 子组件中 methods: { refreshParent() { this.$parent.refreshMethod(); } } 

在父组件中使用refs：通过refs访问子组件实例并调用方法。

 // 父组件中