Vue3依赖注入传方法
解决方案
在Vue 3中,依赖注入(Provide / Inject)是一种强大的机制,可以轻松地将数据或方法从父组件传递到子组件。当我们需要传递方法时,通过provide
选项提供方法,并使用inject
选项在子组件中注入该方法即可。
一、基础用法
提供方法
在父组件中使用provide
来提供一个方法:
vue
<!-- ParentComponent.vue -->
<div>
</div>
</p>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'
function greet(name) {
alert(`Hello, ${name}!`)
}
provide('greet', greet)
<p>
注入方法
然后,在子组件中使用inject
来获取这个方法:
vue
<!-- ChildComponent.vue -->
<button>点击打招呼</button>
import { inject } from 'vue'</p>
<p>const greet = inject('greet')</p>
<p>function invokeGreet() {
if (greet) {
greet('World')
}
}
二、使用ref/reactive包装方法
有时我们可能希望提供的方法能够响应式工作。可以使用ref
或reactive
来包装方法:
vue
<!-- ParentComponent.vue --></p>
import { provide, ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const greetingMessage = ref('Hello')
function greet(name) {
alert(`${greetingMessage.value}, ${name}!`)
}
provide('greet', greet)
provide('updateGreeting', () => {
greetingMessage.value = 'Hi'
})
<p>
vue
<!-- ChildComponent.vue --></p>
import { inject } from 'vue'
const greet = inject('greet')
const updateGreeting = inject('updateGreeting')
function changeGreetingAndInvoke() {
updateGreeting()
greet('Vue User')
}
<p>
三、使用组合式API创建可复用逻辑
对于更复杂的场景,我们可以创建一个组合式函数来封装提供和注入的逻辑:
vue // useGreeting.js import { provide, inject, ref } from 'vue'</p> <p>export function useProvideGreeting() { const greetingMessage = ref('Hello')</p> <p>function greet(name) { alert(<code>${greetingMessage.value}, ${name}!
) }provide('greet', greet) provide('updateGreeting', () => { greetingMessage.value = 'Hi' }) }
export function useInjectGreeting() { const greet = inject('greet') const updateGreeting = inject('updateGreeting')
return { greet, updateGreeting } }
vue
<!-- ParentComponent.vue --></p>
import { useProvideGreeting } from './useGreeting'
useProvideGreeting()
<p>
vue
<!-- ChildComponent.vue --></p>
import { useInjectGreeting } from './useGreeting'
const { greet, updateGreeting } = useInjectGreeting()
function changeGreetingAndInvoke() {
updateGreeting()
greet('Vue User')
}
<p>
以上就是Vue 3中通过依赖注入传递方法的主要方式。根据实际需求选择合适的实现方式,可以使代码更加简洁易维护。