vue3父调用子方法

《vue3父调用子方法》

在Vue3项目开发中，父组件调用子组件的方法是很常见的需求。解决方案是通过给子组件定义一个ref引用，然后在父组件中通过该ref来访问子组件实例及其方法。

一、使用ref和defineExpose

这是比较常见且推荐的方式。

在子组件中：

vue</p>


import { ref } from 'vue'

// 定义子组件中的方法
const childMethod = () => {
  console.log('子组件方法被调用了')
}

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


<p>
  <!-- 子组件模板内容 -->

然后在父组件里：

vue

  <div>
    <!-- 给子组件添加ref -->
    
    <button>调用子组件方法</button>
  </div>
</p>


import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue' // 假设子组件名为ChildComponent

// 定义ref引用子组件
const childComponentRef = ref(null)

// 定义调用子组件方法的函数
const callChildMethod = () => {
  if(childComponentRef.value){
    childComponentRef.value.childMethod()
  }
}


<p>

二、通过事件自定义事件（emit）实现间接调用

虽然这不是直接调用子方法，但可以达到类似效果。

子组件中：

vue</p>


import { defineEmits } from 'vue'

const emit = defineEmits(['execute'])

const executeFunction = () => {
  console.log('执行了子组件逻辑')
}

// 监听来自父组件的指令
window.addEventListener('parentCall',()=>{
  executeFunction()
  emit('execute','执行完成')
})


<p>

父组件：

vue

  <div>
    
    <button>调用子组件逻辑</button>
  </div>
</p>


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

const handleExecute = (msg) => {
  console.log(msg)
}

const callChild = () => {
  const event = new Event('parentCall')
  window.dispatchEvent(event)
}
onMounted(()=>{
  // 可以在这里做一些初始化操作
})


<p>

种方式更为直观和符合Vue3的组件化设计理念，而第二种方式则是一种变通的做法。在实际项目中可以根据具体场景选择合适的方式。