vue3 调用子组件的方法

在Vue 3项目中，调用子组件的方法是一个常见的需求。通常有以下几种解决方案：使用ref引用、通过事件传递、或者利用Vuex等状态管理工具。这些方法，并提供具体的代码示例。

1. 使用 ref 引用子组件

这是最直接的方式，适用于父子组件间通信。父组件可以通过ref属性获取子组件实例，进而调用其方法。

vue
<!-- ParentComponent.vue -->

  <div>
    <button>Call Child Method</button>
    
  </div>
</p>


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

const child = ref(null)

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


<p>

vue
<!-- ChildComponent.vue -->

  <div>
    I'm a child component
  </div>
</p>


function childMethod() {
  console.log('Child method called')
}
defineExpose({
  childMethod
})


<p>

2. 通过自定义事件触发

如果不想直接操作子组件实例，可以考虑让子组件监听父组件发出的事件。

vue
<!-- ParentComponent.vue -->

  <div>
    <button>Trigger Event</button>
    
  </div>
</p>


import ChildComponent from './ChildComponent.vue'

function triggerEvent() {
  // 发出一个事件给子组件
  this.$emit('custom-event')
}


<p>

vue
<!-- ChildComponent.vue -->

  <div>
    I'm a child component
  </div>
</p>


// 监听来自父组件的事件
defineEmits(['custom-event'])

function onCustomEvent() {
  console.log('Received event from parent')
}

// 在 mounted 钩子中监听
onMounted(() => {
  const emit = defineEmits()
  emit('custom-event', onCustomEvent)
})


<p>

3. 使用 provide / inject

对于多层嵌套或复杂场景，可以考虑使用provide/inject机制。

vue
<!-- ParentComponent.vue -->

  <div>
    
  </div>
</p>


import { provide, ref } from 'vue'

const parentState = ref({})

function callMethodInChild() {
  // 更新状态或执行逻辑
  parentState.value.someAction = true
}

provide('parent', {
  callMethodInChild
})


<p>

vue
<!-- ChildComponent.vue -->

  <div>
    I'm a child component
  </div>
</p>


import { inject } from 'vue'

const parent = inject('parent')

// 现在可以调用父组件提供的方法了
parent.callMethodInChild()


<p>

以上就是几种在Vue 3中调用子组件方法的主要方式。根据具体应用场景选择合适的方法，可以使代码更加简洁和易于维护。