Vue3 Composition API 子组件中使用 emit 触发父组件方法

2024-01-17 01:48:47

Vue3 中的 Composition API 是一种新的方式来组织和管理组件逻辑。它允许您将组件的逻辑拆分为更小的、可重用的部分，称为 "composition 函数"。这些函数可以被多个组件重用，使您的代码更易于维护和测试。

在 Vue2 中，子组件可以使用 this.$emit('xxx', a, b) 来触发父组件的方法。但是在 Vue3 中，setup 函数中不能使用 this，所以不能直接使用 this.$emit() 来触发父组件的方法。

使用 provide/inject

Vue3 中，可以使用 provide/inject 来实现父子组件通信。父组件可以使用 provide() 方法提供数据或方法，子组件可以使用 inject() 方法来注入这些数据或方法。

例如，在父组件中，可以使用以下代码提供一个 msg 数据：
```
export default {
  setup() {
    provide('msg', 'Hello from parent!');
  }
}
```
然后，在子组件中，可以使用以下代码注入 msg 数据：
```
export default {
  setup() {
    const msg = inject('msg');
    return {
      msg
    };
  }
}
```
现在，子组件就可以使用 msg 数据了。
使用 emit

Vue3 中，也可以使用 emit() 方法来触发父组件的方法。但是，在 setup 函数中不能使用 this，所以需要使用 getCurrentInstance() 方法来获取当前组件的实例，然后才能使用 emit() 方法。

例如，在子组件中，可以使用以下代码触发父组件的 sayHello() 方法：
```
export default {
  setup() {
    const { emit } = getCurrentInstance();
    return {
      sayHello() {
        emit('sayHello');
      }
    };
  }
}
```
然后，在父组件中，可以使用以下代码监听 sayHello 事件：
```
export default {
  setup() {
    on('sayHello', () => {
      console.log('Hello from child!');
    });
  }
}
```
现在，当子组件调用 sayHello() 方法时，父组件就会打印 "Hello from child!"。