祖孙组件传值：Vue Provide / Inject 的妙用

Vue Provide / Inject 祖孙组件传值

在 Vue.js 中，provide/inject 是在组件之间传递数据的常用方式。它允许祖先组件提供数据，而子组件可以注入这些数据。在 Vue.js 2.x 和 Vue.js 3.x 中，provide/inject 的工作方式略有不同。

Vue.js 2.x 中的 Provide/Inject

在 Vue.js 2.x 中，provide/inject 是通过 mixin 实现的。祖先组件使用 provide 方法提供数据，而子组件使用 inject 方法注入这些数据。

祖先组件

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

子组件

export default {
  inject: ['message'],
  template: '<p>{{ message }}</p>'
}

Vue.js 3.x 中的 Provide/Inject

在 Vue.js 3.x 中，provide/inject 是通过 setup 函数实现的。祖先组件使用 provide 方法提供数据，而子组件使用 inject 方法注入这些数据。

祖先组件

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

子组件

export default {
  setup() {
    const message = inject('message')
    return {
      message
    }
  },
  template: '<p>{{ message }}</p>'
}

Provide/Inject 的使用场景

Provide/Inject 非常适合在祖先组件和子组件之间传递数据，尤其是当数据需要在多个子组件中共享时。例如，祖先组件可以提供一个用户对象，而子组件可以注入该对象并访问用户数据。

注意点

• provide/inject 绑定并不是响应式的。这意味着如果祖先组件中的数据发生变化，子组件中的数据不会自动更新。
• 我们可以通过传递一个 ref property 或 reactive 对象给 provide 来改变这种行为。

总结

Provide/Inject 是在 Vue.js 中传递数据的常用方式。它允许祖先组件提供数据，而子组件可以注入这些数据。Provide/Inject 在 Vue.js 2.x 和 Vue.js 3.x 中的工作方式略有不同，但基本原理是一样的。