当前位置：首页 > VUE

vue组件实现函数调用

2026-01-21 01:13:47VUE

实现 Vue 组件函数调用的方法

在 Vue 组件中实现函数调用可以通过多种方式完成，以下是常见的几种方法：

通过 methods 定义并调用函数

在 Vue 组件的 methods 选项中定义函数，然后在模板或脚本中调用：

<template>
  <button @click="handleClick">点击调用函数</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('函数被调用');
    }
  }
}
</script>

通过 $emit 实现父子组件通信

父组件调用子组件的函数可以通过 $emit 触发事件：

vue组件实现函数调用

// 子组件
<template>
  <button @click="triggerEvent">触发事件</button>
</template>

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

// 父组件
<template>
  <child-component @custom-event="handleEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleEvent() {
      console.log('父组件接收到事件');
    }
  }
}
</script>

通过 ref 直接调用子组件方法

使用 ref 可以直接访问子组件实例并调用其方法：

// 子组件
<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用');
    }
  }
}
</script>

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

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

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

通过 provide/inject 跨层级调用函数

vue组件实现函数调用

在祖先组件中提供函数，后代组件通过 inject 调用：

// 祖先组件
<script>
export default {
  provide() {
    return {
      sharedMethod: this.sharedMethod
    };
  },
  methods: {
    sharedMethod() {
      console.log('跨层级函数调用');
    }
  }
}
</script>

// 后代组件
<script>
export default {
  inject: ['sharedMethod'],
  mounted() {
    this.sharedMethod();
  }
}
</script>

通过事件总线（Event Bus）实现全局调用

创建一个全局事件总线来实现任意组件间的函数调用：

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

// 发送事件的组件
<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    emitEvent() {
      EventBus.$emit('global-event', '参数');
    }
  }
}
</script>

// 接收事件的组件
<script>
import { EventBus } from './event-bus.js';

export default {
  created() {
    EventBus.$on('global-event', (payload) => {
      console.log('接收到全局事件:', payload);
    });
  }
}
</script>