Vue.js 中调用子常用方式_属性引用子组件实例_如何在内组件中调用其他子组件的方法

作者：网络发烧程序猿 | 发布时间：2025-07-09 |

这种方法就像给子组件起了一个小名，父组件可以直接用这个小名来指挥子组件。这样做既直接又容易理解，适合当父组件需要直接操控子组件的时候使用。

一、使用 `ref` 属性引用子组件实例

在子组件中定义一个方法：

```javascript // 子组件 methods: { childMethod() { // 这里写子组件的方法 } } ```

然后，在父组件中使用 `ref` 属性来引用子组件，就可以调用它了：

```javascript // 父组件 methods: { callChildMethod() { this.$refs.childRef.childMethod(); } } ```

如果子组件想给父组件传个消息，它就会使用这种方法——就像小学生给家长写个纸条一样。

在子组件中触发事件

```javascript // 子组件 methods: { sendEvent() { this.$emit('myEvent', 'Hello, Parent!'); } } ```

在父组件中监听子组件事件

```javascript // 父组件 methods: { handleEvent(message) { // 处理接收到的消息 console.log(message); } } ```

如果多个组件需要共享数据，或者数据的更新需要跨多个组件，Vuex 就像一个大管家，负责统一管理这些数据。

在 Vuex 中定义状态和方法

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

在子组件中调用 Vuex 方法

```javascript // 子组件 methods: { incrementCount() { this.$store.commit('increment'); } } ```

在父组件中获取 Vuex 状态

```javascript // 父组件 computed: { count() { return this.$store.state.count; } } ```

通过以上三种方式，我们可以灵活地在 Vue.js 中调用子组件的方法。选择哪种方式，要根据实际的应用场景来定：

场景	推荐方式
需要直接调用子组件方法	属性引用子组件实例
需要在多个组件间进行通信	事件机制或 Vuex 状态管理

合理地使用这些方法，可以让我们应用的架构更加清晰，代码也更容易维护。