《vue3调用slot中的方法》

解决方案

在Vue 3中，要调用slot（插槽）中的方法，主要是通过向子组件传递作用域插槽来实现。这使得父组件能够获取到子组件内部的方法，并且可以在slot内容中使用这些方法。

直接使用作用域插槽

在子组件中定义一个带有作用域的数据或方法的对象。例如：

vue
<!-- 子组件 ChildComponent.vue -->

  <div>
    <!-- 插槽位置 -->
    
  </div>
</p>


// 定义子组件的方法
const childMethod = () => {
  console.log('这是子组件的方法');
}


<p>

然后在父组件中使用这个子组件并接收作用域插槽传递过来的方法：

vue
<!-- 父组件 ParentComponent.vue -->

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


import ChildComponent from './ChildComponent.vue'


<p>``<code>
这样当点击按钮时，就可以调用子组件的childMethod`方法了。


通过ref和provide / inject组合

另一种思路是利用ref先获取子组件实例，再结合provide和inject来实现。

子组件中：

```vue


  

    
  



import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
instance.proxy.$childMethod = () => {
  console.log('子组件提供给父组件的方法')
}

父组件中：
```vue

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

const childComRef = ref(null)

const callChildMethod = () => {
childComRef.value.$childMethod()
}

```

不过这种方式相对比较复杂，而且不太符合Vue推荐的做法，但也可以作为一种思路了解。通常情况下，种直接使用作用域插槽的方式更为简洁、直观，也更符合Vue组件化开发的思想。