vue3中插槽传到组件内部的，怎么才能获取到ref

Question

问题描述

我尝试做一个popover组件，大致参考element ui 使用插槽做，但是发现插槽传过去的没法获取到ref。

相关代码

调用

组件里:

组件data:

尝试的方法

拿不到... slots返回的是一个虚拟节点 尝试手动挂载无果...

...提问三十分钟后自行曲线救国解决了 但仍想知道答案。

Answer 1

父组件的ref只能通过父组件获取，父组件获取自己的实例传到子组件
父组件
import {getCurrentInstance} from 'vue'
let instance=getCurrentInstance()
<child :ins="instance">
<input ref="input"/>
</child>
子组件
setup(prop,ctx){
prop.ins.refs.ins//这就是slot传过来的input的ref
}

Answer 2

试一下

console.log(this.$slots)

如果多个插槽

// 排序空格其他内容
this.slotChildren = []
for (let i = 0; i< this.$slots.default.length; i++) {
  if (that.$slots.default[i].elm.nodeType !== 3) {
    that.slotChildren.push(that.$slots.default[i]) // 获得那些插入的内容
  }
}

Answer 3

vue3中，我也遇到这样的封装组件问题，想知道最后你的解决方案是哪一个！

Answer 4

我也有遇到这种场景, 是用<component :is="$slots.default()[0]"></component>这样实现的,但是要用作用域插槽就gg了...