vue2 inject

作者：仯孒①個亾哋杺￠涳孒发布日期:2025-06-13 浏览:41

// 在 Vue 2 中使用 inject 和 provide 的示例

// 父组件中提供依赖
new Vue({
  el: '#app',
  provide: function () {
    return {
      message: 'Hello from parent!'
    }
  },
  template: '<child></child>'
})

// 子组件中注入依赖
Vue.component('child', {
  inject: ['message'],
  template: '<div>{{ message }}</div>'
})

解释说明：

provide：在父组件中定义，用于向下传递数据或方法。即使子组件深度嵌套，也可以通过 inject 获取到这些数据或方法。
inject：在子组件中定义，用于接收来自祖先组件提供的数据或方法。需要注意的是，inject 只能接收通过 provide 提供的内容。

以上代码展示了如何在 Vue 2 中使用 provide 和 inject 来实现跨层级组件之间的依赖注入。

上一篇：vue 数组删除

下一篇：vue router.push