vue3获取子组件方法

在Vue 3中，获取子组件的方法有多种解决方案，最常见的方式是通过ref和provide/inject。这两种主流方案，并给出具体的代码示例。

一、使用ref引用

这是最常见的获取子组件实例的方式。我们需要在父组件中为子组件添加一个ref属性，在父组件中可以通过this.$refs访问到子组件实例。

vue
// 子组件Child.vue

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


import { defineExpose } from 'vue'

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

defineExpose({
  childMethod
})


<p>

vue
// 父组件Parent.vue

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


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

const childRef = ref(null)

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


<p>

二、使用provide/inject方式

这种方式更适合处理跨层级组件之间的通信。父组件通过provide提供数据或方法，子组件通过inject来接收。

vue
// 父组件Parent.vue</p>


import { provide } from 'vue'

function parentMethod() {
  console.log('父组件提供的方法')
}

provide('parentMethod', parentMethod)


<p>

vue
// 子组件Child.vue</p>


import { inject } from 'vue'

const parentMethod = inject('parentMethod')

function callParentMethod() {
  parentMethod()
}


<p>

三、事件传递方式

除了直接获取子组件方法外，我们还可以通过事件的方式来实现父子组件之间的交互。这种做法更符合Vue的单向数据流原则。

vue
// 子组件Child.vue

  <div>点击我触发事件</div>
</p>


import { defineEmits } from 'vue'

const emit = defineEmits(['customEvent'])

function handleClick() {
  emit('customEvent')
}


<p>

vue
// 父组件Parent.vue

  
</p>


function handleCustomEvent() {
  console.log('子组件触发了自定义事件')
}


<p>

以上三种方式各有优缺点：
- ref方式简单直接，适合处理简单的父子组件关系
- provide/inject适用于多层嵌套组件间的通信
- 事件传递方式更符合Vue的设计理念，推荐优先考虑
- 在实际项目中可以根据具体场景选择合适的方式，也可以组合使用这些技术

希望这篇能帮助您更好地理解Vue 3中父子组件通信的各种方式。