Vue3中全新API provide/inject解决组件间通讯问题

前端

2023-12-23 08:28:12

一、组件通讯的传统方式

在Vue2中，组件间通讯主要通过props和事件通信两种方式实现。

props ：props是子组件从父组件接收数据的属性。它是一种单向数据流，即数据只能从父组件传递给子组件，反之不行。
事件通信 ：事件通信是组件之间通过触发和监听事件来进行通讯。这种方式比较灵活，可以实现双向数据流，但代码也更复杂。

二、provide/inject的原理

provide/inject是Vue3中引入的全新API，它允许组件通过祖先-后代关系传递数据。与props和事件通信不同，provide/inject是一种依赖注入 的方式。

依赖注入是一种软件设计模式，它将组件之间的依赖关系显式地定义出来，而不是通过隐式的方式传递。这使得组件之间的关系更加清晰，也更容易维护。

在Vue3中，provide/inject的原理如下：

父组件通过provide()方法提供数据。
子组件通过inject()方法注入数据。

三、provide/inject的用法

1. 父组件中使用provide()方法

父组件中可以使用provide()方法来提供数据。provide()方法接收一个对象作为参数，该对象中的属性将被提供给子组件。

例如，以下代码演示了如何在父组件中使用provide()方法提供数据：

export default {
  provide() {
    return {
      message: 'Hello, world!'
    }
  }
}

2. 子组件中使用inject()方法

子组件中可以使用inject()方法来注入数据。inject()方法接收一个对象作为参数，该对象中的属性将被注入到子组件的实例中。

例如，以下代码演示了如何在子组件中使用inject()方法注入数据：

export default {
  inject: ['message'],
  render() {
    return <div>{ this.message }</div>
  }
}

3. provide和inject同时使用

父组件和子组件都可以同时使用provide和inject方法。这允许组件之间进行双向数据流。

例如，以下代码演示了如何同时使用provide和inject方法实现组件之间的双向数据流：

// 父组件
export default {
  provide() {
    return {
      message: 'Hello, world!'
    }
  }
}

// 子组件
export default {
  inject: ['message'],
  methods: {
    updateMessage(newMessage) {
      this.$emit('update:message', newMessage)
    }
  },
  render() {
    return <div>
      <input v-model="message" @input="updateMessage" />
      <p>{ this.message }</p>
    </div>
  }
}