当前位置：首页 > VUE

vue注入怎么实现

2026-03-30 10:02:20VUE

Vue 依赖注入的实现方式

Vue 提供了 provide 和 inject API 实现依赖注入，允许祖先组件向所有子孙组件传递数据或方法，无需逐层传递 props。

基本语法

祖先组件通过 provide 提供数据：

// 祖先组件
export default {
  provide() {
    return {
      sharedData: this.dataValue,
      sharedMethod: this.methodName
    }
  },
  data() {
    return { dataValue: '示例数据' }
  },
  methods: {
    methodName() { console.log('注入方法') }
  }
}

子孙组件通过 inject 接收数据：

vue注入怎么实现

// 子孙组件
export default {
  inject: ['sharedData', 'sharedMethod'],
  mounted() {
    console.log(this.sharedData)  // 输出: "示例数据"
    this.sharedMethod()           // 输出: "注入方法"
  }
}

响应式处理

默认情况下，provide 的值不是响应式的。如需响应式数据，可使用计算属性或组合式 API 的 ref/reactive：

// 组合式 API 实现响应式
import { provide, ref } from 'vue'

setup() {
  const count = ref(0)
  provide('count', count)
  return { count }
}

注入默认值

当不确定祖先是否提供数据时，可设置默认值：

vue注入怎么实现

inject: {
  sharedData: { default: '默认值' },
  sharedMethod: { default: () => console.log('默认方法') }
}

工厂函数注入

通过 from 指定数据来源，default 指定默认值：

inject: {
  dataKey: {
    from: 'optionalKey',
    default: 'fallbackValue'
  }
}

组合式 API 用法

在 setup() 中使用 provide 和 inject：

// 提供方
import { provide } from 'vue'
setup() {
  provide('theme', 'dark')
}

// 接收方
import { inject } from 'vue'
setup() {
  const theme = inject('theme', 'light') // 第二个参数为默认值
  return { theme }
}