《vue3组件传递方法》

解决方案

在Vue3中，组件间传递方法主要通过props和自定义事件来实现。对于父组件向子组件传递方法，可以利用props将方法作为属性传入子组件；而子组件调用父组件的方法或者向父组件传递信息时，则借助自定义事件。

父组件向子组件传递方法

当父组件需要向子组件传递方法时，可以在父组件中定义好方法，然后以属性的形式通过props传递给子组件。
```html

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

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

</p>

<p>```html
<!-- 子组件 -->

  <div>
    <button>点击我调用父组件方法</button>
  </div>
</p>


defineProps({
  parentMethod: {
    type: Function,
    required: true
  }
})

const handleClick = () => {
  props.parentMethod()
}


<p>

子组件调用父组件方法（通过自定义事件）

子组件可以通过触发自定义事件来间接调用父组件的方法。
```html

import ChildComponent from './ChildComponent.vue'

const handleCustomEvent = (data) => {
console.log('接收到子组件传递的数据：', data)
// 这里可以执行父组件的逻辑
}

</p>

<p>```html
<!-- 子组件 -->

  <div>
    <button>点击我触发自定义事件</button>
  </div>
</p>


const emit = defineEmits(['customEvent'])

const emitCustomEvent = () => {
  emit('customEvent', '一些数据')
}


<p>

除了上述两种常见的方式，在更复杂的情况下，还可以使用provide / inject组合。父组件通过provide提供方法，子组件通过inject注入并使用该方法。这种方式适合于多层嵌套组件之间的通信。不过这种方式相对不太直观，而且容易导致代码耦合度增加，所以在简单场景下不推荐使用。