组件间方法互相调用

2023-09-01 22:07:59

前言

在 Vue3 中，组件是构建用户界面的基本单元。组件之间需要进行通信才能实现数据的共享和功能的调用。本文将介绍 Vue3 中组件之间方法互相调用的几种常见方式，并提供详细的代码示例。

1. 使用 props 和 emit

props 和 emit 是 Vue3 中最常用的组件通信方式。props 用于父组件向子组件传递数据，emit 用于子组件向父组件触发事件并传递数据。

以下是如何使用 props 和 emit 实现组件之间方法互相调用：

父组件代码：

<template>
  <ChildComponent @callFatherMethod="callFatherMethod"></ChildComponent>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    callFatherMethod() {
      console.log('父组件方法被调用了');
    }
  }
};
</script>

子组件代码：

<template>
  <button @click="callFatherMethod">调用父组件方法</button>
</template>

<script>
export default {
  methods: {
    callFatherMethod() {
      this.$emit('callFatherMethod');
    }
  }
};
</script>

通过这种方式，子组件可以通过 emit 触发一个事件，父组件通过 props 监听这个事件，并执行相应的回调函数。

2. 使用 provide/inject

provide/inject 是 Vue3 中另一种常用的组件通信方式。provide 用于父组件向其所有子组件提供数据或方法，inject 用于子组件从父组件获取数据或方法。

以下是如何使用 provide/inject 实现组件之间方法互相调用：

父组件代码：

<template>
  <ChildComponent></ChildComponent>
</template>

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

export default {
  components: { ChildComponent },
  provide() {
    return {
      callFatherMethod: this.callFatherMethod
    };
  },
  methods: {
    callFatherMethod() {
      console.log('父组件方法被调用了');
    }
  }
};
</script>

子组件代码：

<template>
  <button @click="callFatherMethod">调用父组件方法</button>
</template>

<script>
export default {
  inject: ['callFatherMethod'],
  methods: {
    callFatherMethod() {
      this.callFatherMethod();
    }
  }
};
</script>

通过这种方式，子组件可以通过 inject 获取父组件提供的 data 或 methods，并直接调用它们。

3. 使用 Vuex

Vuex 是一个集中式的状态管理库，它可以帮助我们在 Vue3 应用中管理共享状态。Vuex 可以用来实现组件之间的数据共享和方法调用。

以下是如何使用 Vuex 实现组件之间方法互相调用：

store 代码：

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

export default store;

父组件代码：

<template>
  <ChildComponent></ChildComponent>
</template>

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

export default {
  components: { ChildComponent },
  store
};
</script>

子组件代码：

<template>
  <button @click="incrementAsync">调用父组件方法</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['incrementAsync'])
  }
};
</script>