Vue.js 调用子组件方法：如何做才正确？

2024-03-07 09:16:09

在 Vue.js 中调用子组件方法：最佳实践

简介

在 Vue.js 应用程序中，组件化是实现复杂界面和提高应用程序可维护性的关键。有时，需要从父组件调用子组件的方法。本文将深入探讨在 Vue.js 中实现此操作的最佳实践。

直接通过 Props

最直接的方法是通过 props 传递一个方法引用。这适用于子组件需要访问父组件状态或方法的情况。

// 父组件
<template>
  <child-component :say-hello="sayHello" />
</template>
<script>
export default {
  methods: {
    sayHello() {
      // 父组件方法
    }
  }
}
</script>

// 子组件
<template>
  <button @click="sayHello">Say Hello</button>
</template>
<script>
export default {
  props: ['sayHello'],
  methods: {
    sayHello() {
      this.$emit('say-hello')
    }
  }
}
</script>

通过事件总线

事件总线是一种全局事件系统，允许组件之间通信。它可用于从父组件触发事件，并让子组件监听和响应。

// 父组件
<template>
  <button @click="sayHello">Say Hello</button>
</template>
<script>
import { EventBus } from '@/event-bus';
export default {
  methods: {
    sayHello() {
      EventBus.$emit('say-hello')
    }
  }
}
</script>

// 子组件
<template>
  <button @click="sayHello">Say Hello</button>
</template>
<script>
import { EventBus } from '@/event-bus';
export default {
  mounted() {
    EventBus.$on('say-hello', this.sayHello)
  },
  methods: {
    sayHello() {
      // 子组件方法
    }
  }
}
</script>

通过 ref

ref 属性允许父组件获取子组件实例的引用。然后可以使用此引用来调用子组件的方法。

// 父组件
<template>
  <child-component ref="child" />
</template>
<script>
export default {
  methods: {
    sayHello() {
      this.$refs.child.sayHello()
    }
  }
}
</script>

// 子组件
<template>
  <button @click="sayHello">Say Hello</button>
</template>
<script>
export default {
  methods: {
    sayHello() {
      // 子组件方法
    }
  }
}
</script>