Vue.js 在外部调用Vue.js组件的方法

在本文中，我们将介绍如何从组件外部调用Vue.js组件的方法。Vue.js是一款用于构建用户界面的JavaScript框架，它采用了MVVM（Model-View-ViewModel）的架构模式，并提供了一些用于构建响应式应用程序的强大功能。

阅读更多：Vue.js 教程

使用Vue.js的$refs属性

Vue.js提供了一个特殊的属性 $refs，它允许我们在组件外部访问组件实例，并调用组件中的方法。我们可以通过在组件标签上添加ref属性来声明一个唯一的引用，然后在父组件中使用$ refs属性来访问该组件实例。

下面是一个示例，演示了如何在组件外部调用组件的方法：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    },
  },
};
</script>

在上面的例子中，我们在父组件中声明了一个引用<child-component ref="child"></child-component>，然后在按钮的点击事件中调用了this.$refs.child.childMethod()来调用子组件中的方法。

使用事件总线

另一种在外部调用Vue.js组件方法的方法是使用事件总线。Vue.js提供了一个简单的机制，允许我们在组件之间发送和监听事件。

首先，我们需要创建一个全局的事件总线实例：

// event-bus.js
import Vue from 'vue';
export default new Vue();

然后，在需要调用组件方法的地方，我们可以通过事件总线实例发送一个自定义事件，并携带需要传递的参数：

// ParentComponent.vue
import eventBus from './event-bus';

export default {
  methods: {
    callChildMethod() {
      eventBus.$emit('callChildMethod', {
        param1: 'value1',
        param2: 'value2',
      });
    },
  },
};

接下来，在需要接收事件并调用方法的组件中，我们可以在created生命周期钩子中订阅事件，并在回调函数中调用方法：

// ChildComponent.vue
import eventBus from './event-bus';

export default {
  created() {
    eventBus.$on('callChildMethod', (params) => {
      this.childMethod(params.param1, params.param2);
    });
  },
  methods: {
    childMethod(param1, param2) {
      // 执行组件方法
    },
  },
};

使用Vuex

如果你的应用程序使用了Vuex状态管理库，那么在外部调用Vue.js组件方法会变得更加容易。我们可以将需要调用的方法和数据保存到Vuex的store中，然后在外部通过修改store的状态来触发组件中的方法。

首先，我们需要在store中定义一个module，用于保存需要调用的方法和数据：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const module = {
  state: {
    method: null,
    params: {},
  },
  mutations: {
    setMethod(state, method) {
      state.method = method;
    },
    setParams(state, params) {
      state.params = params;
    },
  },
};

export default new Vuex.Store({
  modules: {
    module,
  },
});

然后，在需要调用组件方法的地方，我们可以通过store的commit方法来修改store的状态：

// ParentComponent.vue
import store from './store';

export default {
  methods: {
    callChildMethod() {
      store.commit('module/setMethod', 'childMethod');
      store.commit('module/setParams', {
        param1: 'value1',
        param2: 'value2',
      });
    },
  },
};

最后，在组件中我们可以通过Vuex的mapState和mapMutations辅助函数来将方法和数据映射到组件中：

// ChildComponent.vue
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState('module', ['method', 'params']),
  },
  created() {
    this.$watch(
      () => this.method,
      (method) => {
        if (method === 'childMethod') {
          this.childMethod(this.params.param1, this.params.param2);
        }
      }
    );
  },
  methods: {
    ...mapMutations('module', ['setMethod', 'setParams']),
    childMethod(param1, param2) {
      // 执行组件方法
    },
  },
};