Vue：父组件触发子组件中的方法

**Vue：父组件触发子组件中的方法**

在 Vue 的应用开发中，经常会遇到这样的场景：需要从父组件中触发子组件中的某个方法。这种需求是非常常见的，尤其是在复杂的应用中。

###1. 使用 $emit 和 $on最简单的方式就是使用 `$emit` 和 `$on` 来实现通信。父组件通过 `$emit` 发送事件，而子组件通过 `$on` 监听这个事件。

**父组件**

html<template>
 <div>
 <button @click="triggerEvent">触发事件</button>
 </div>
</template>

<script>
export default {
 methods: {
 triggerEvent() {
 this.$emit('my-event');
 }
 }
}
</script>

html<template>
 <div>
 <p>子组件</p>
 </div>
</template>

<script>
export default {
 mounted() {
 this.$on('my-event', () => {
 console.log('收到事件');
 });
 }
}
</script>

html<template>
 <div>
 <child ref="child" />
 <button @click="triggerMethod">触发方法</button>
 </div>
</template>

<script>
import Child from './Child.vue';

export default {
 components: { Child },
 methods: {
 triggerMethod() {
 this.$refs.child.myMethod();
 }
 }
}
</script>

html<template>
 <div>
 <p>子组件</p>
 </div>
</template>

<script>
export default {
 methods: {
 myMethod() {
 console.log('执行方法');
 }
 }
}
</script>

javascriptimport Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
 state: {
 count:0 },
 mutations: {
 increment(state) {
 state.count++;
 }
 }
});

export default store;

html<template>
 <div>
 <button @click="increment">触发事件</button>
 </div>
</template>

<script>
import store from './store';

export default {
 methods: {
 increment() {
 store.commit('increment');
 }
 }
}
</script>

html<template>
 <div>
 <p>子组件</p>
 </div>
</template>

<script>
import store from './store';

export default {
 mounted() {
 store.subscribe((mutation, state) => {
 console.log('收到事件', mutation.type);
 });
 }
}
</script>