以实例解释 Vue 中 provide/inject 的妙用

前端

2023-11-28 07:15:06

provide/inject 的基本原理

provide/inject 是 Vue 中的一种组件通信方式，它允许父组件向其子组件提供数据或逻辑，而子组件可以通过注入的方式访问这些数据或逻辑。

provide/inject 的基本原理是：

父组件通过 provide 方法提供数据或逻辑。
子组件通过 inject 方法注入这些数据或逻辑。
子组件可以使用注入的数据或逻辑。

provide/inject 的使用场景

provide/inject 可以用于各种场景，其中最常见的场景包括：

共享数据 ：provide/inject 可以用于在父组件和子组件之间共享数据，例如用户数据、配置信息等。
共享逻辑 ：provide/inject 可以用于在父组件和子组件之间共享逻辑，例如公共方法、事件处理函数等。
跨组件通信 ：provide/inject 可以用于在父子组件、兄弟组件之间进行通信，例如父子组件之间的父子通信、兄弟组件之间的兄弟通信等。

provide/inject 的实例

为了更好地理解 provide/inject 的用法，我们来看几个具体的实例：

实例一：共享数据

// 父组件
export default {
  provide() {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  }
}

// 子组件
export default {
  inject: ['user'],

  render() {
    return <div>用户姓名：{this.user.name}</div>
  }
}

在上面的实例中，父组件通过 provide 方法提供了 user 对象，子组件通过 inject 方法注入了 user 对象。然后，子组件就可以使用 this.user 来访问 user 对象的数据。

实例二：共享逻辑

// 父组件
export default {
  provide() {
    return {
      formatTime: (timestamp) => {
        return new Date(timestamp).toLocaleDateString()
      }
    }
  }
}

// 子组件
export default {
  inject: ['formatTime'],

  render() {
    return <div>当前时间：{this.formatTime(Date.now())}</div>
  }
}

在上面的实例中，父组件通过 provide 方法提供了 formatTime 方法，子组件通过 inject 方法注入了 formatTime 方法。然后，子组件就可以使用 this.formatTime 来调用 formatTime 方法。

实例三：跨组件通信

// 父组件
export default {
  provide() {
    return {
      increment: () => {
        this.count++
      }
    }
  },

  data() {
    return {
      count: 0
    }
  }
}

// 子组件
export default {
  inject: ['increment'],

  render() {
    return <div>
      <button @click="increment">+</button>
      <span>{this.count}</span>
    </div>
  }
}

在上面的实例中，父组件通过 provide 方法提供了 increment 方法，子组件通过 inject 方法注入了 increment 方法。然后，子组件就可以使用 this.increment 来调用 increment 方法。当子组件调用 increment 方法时，父组件的 count 数据就会增加。