vue 注入怎么实现
Vue 注入的实现方式
Vue 提供了 provide 和 inject 机制来实现依赖注入，主要用于跨层级组件间的数据传递。以下是具体实现方法：
父组件或祖先组件中使用 provide
在父组件或祖先组件中，通过 provide 选项或 setup 函数中的 provide 方法提供数据：
// 选项式 API
export default {
provide: {
message: 'Hello from parent',
count: 123
}
}
// 组合式 API
import { provide } from 'vue'
export default {
setup() {
provide('message', 'Hello from parent')
provide('count', 123)
}
}子组件或后代组件中使用 inject
在需要接收数据的子组件中，通过 inject 选项或 setup 函数中的 inject 方法获取数据：
// 选项式 API
export default {
inject: ['message', 'count']
}
// 组合式 API
import { inject } from 'vue'
export default {
setup() {
const message = inject('message')
const count = inject('count')
return { message, count }
}
}注入默认值
如果注入的值可能不存在，可以设置默认值：
const value = inject('key', 'default value')响应式注入
为了使注入的数据保持响应性，可以使用 ref 或 reactive：
import { provide, ref } from 'vue'
export default {
setup() {
const count = ref(0)
provide('count', count)
}
}注入函数
除了数据，也可以注入函数：
// 提供者
provide('updateCount', (newValue) => {
count.value = newValue
})
// 接收者
const updateCount = inject('updateCount')
updateCount(10)通过以上方式可以实现 Vue 组件间的依赖注入，适合跨多层组件传递数据的场景。
