vue3调用父组件方法
在Vue3中，想要让子组件调用父组件的方法，有多种解决方案。最常用且直接的方式是通过$emit触发自定义事件，父组件监听该事件后执行相应的方法。另外还可以借助provide/inject进行更灵活的调用。
1. 使用 $emit 触发事件
这是官方推荐的标准做法，也是最直观易懂的方式：
vue
// 父组件 Parent.vue
</p>
import Child from './Child.vue'
import { defineComponent } from 'vue'
const handleEvent = () => {
console.log('父组件方法被调用了')
}
<p>vue
// 子组件 Child.vue
<button>点击我</button>
</p>
const emit = defineEmits(['custom-event'])
const onClick = () => {
emit('custom-event') // 触发自定义事件
}
<p>这种方式的优点是父子组件之间的关系清晰明确，缺点是层级较多时传递比较麻烦。
2. 使用 provide / inject
当组件嵌套层级较深时，使用provide/inject会更加方便：
vue
// 父组件 Parent.vue</p>
import { provide } from 'vue'
const parentMethod = () => {
console.log('父组件方法')
}
provide('parentMethod', parentMethod) // 提供方法
<p>vue
// 子组件 Child.vue</p>
import { inject } from 'vue'
const parentMethod = inject('parentMethod') // 注入方法
const callParentMethod = () => {
parentMethod() // 直接调用父组件方法
}
<p>这种方式适用于多层嵌套场景，但要注意避免滥用导致代码难以维护。
3. 使用 ref 获取实例
虽然不是实践，但在某些特殊场景下也可以考虑：
vue
// 父组件 Parent.vue
<button>调用子方法</button>
</p>
import { ref } from 'vue'
import Child from './Child.vue'
const child = ref(null)
const callChildMethod = () => {
child.value.someMethod()
}
<p>以上三种方式各有优劣，在实际开发中要根据具体场景选择合适的方式：
- 推荐优先使用 $emit
- 多层嵌套时可以考虑 provide/inject
- 避免频繁使用 ref 获取实例
选择最适合项目需求的方式，保持代码的可读性和可维护性才是最重要的。
