vue3组件方法调用

解决方案

在Vue 3中，组件间的方法调用是开发过程中经常遇到的需求。介绍如何在父组件和子组件之间进行方法调用，包括直接调用、通过事件触发调用以及使用provide/inject模式等不同方式。

一、父组件调用子组件方法

使用ref获取子组件实例

这是最常用的方式之一，具体步骤如下：
1. 在子组件中定义需要暴露的方法
2. 在父组件中通过ref属性获取子组件实例
3. 调用子组件实例上的方法

html
<!-- 子组件 Child.vue -->

  <div>我是子组件</div>
</p>


import { defineExpose } from 'vue'

function childMethod() {
  console.log('子组件方法被调用了')
}

defineExpose({
  childMethod // 将方法暴露给父组件
})


<p>

html
<!-- 父组件 Parent.vue -->

  <div>
    
    <button>调用子组件方法</button>
  </div>
</p>


import { ref } from 'vue'
import Child from './Child.vue'

const childRef = ref(null)

function callChildMethod() {
  if (childRef.value) {
    childRef.value.childMethod()
  }
}


<p>

二、子组件调用父组件方法

方法1：通过自定义事件

1. 子组件触发事件
2. 父组件监听事件并处理

html
<!-- 子组件 Child.vue -->

  <button>点击我触发父组件方法</button>
</p>


const emit = defineEmits(['customEvent'])

function triggerEvent() {
  emit('customEvent', '传递的参数')
}


<p>

html
<!-- 父组件 Parent.vue -->

  
</p>


import Child from './Child.vue'

function handleEvent(message) {
  console.log('收到子组件传来的消息:', message)
}


<p>

方法2：使用provide/inject

适用于多层嵌套组件之间的通信

html
<!-- 父组件 Parent.vue --></p>


import { provide, ref } from 'vue'

const parentMethod = () => {
  console.log('父组件方法')
}

provide('parentMethod', parentMethod)


<p>

html
<!-- 孙组件 GrandChild.vue --></p>


import { inject } from 'vue'

const parentMethod = inject('parentMethod')

// 可以直接调用parentMethod()


<p>

三、注意事项

• 使用ref时要注意组件是否已经挂载完成
• 自定义事件命名应遵循驼峰或短横线命名规范
• provide/inject虽然方便但要谨慎使用，避免过度依赖导致代码难以维护
• 对于简单的父子组件通信，推荐使用种或第二种方式；对于复杂的跨层级通信场景，可以考虑使用Vuex状态管理库

通过以上几种方式，我们可以在Vue 3项目中灵活地实现组件间的方法调用。选择合适的方式取决于具体的业务场景和项目结构。