有没有办法访问 Vue $scopedSlot 的挂载 DOM 元素？答案

【问题标题】：Is there a way to access Vue $scopedSlot's mounted DOM element?有没有办法访问 Vue $scopedSlot 的挂载 DOM 元素？
【发布时间】：2020-09-15 07:03:04
【问题描述】：

我有一个名为 myElement 的作用域插槽，我可以通过 this.$scopedSlots.myElement()[0] 访问它。

通常当一个 vnode 被挂载时，有一个包含 DOM 元素的$el，但显然不在作用域插槽中，只有一个未定义的elm。

我还尝试在子模板中的插槽上放置一个引用并通过.context.$refs 访问它，但它仅列出了父模板上的引用。

如果子组件不知道它的 id 或类，我有什么方法可以访问挂载的 DOM 元素？

谢谢

复制链接：

https://codepen.io/antoniandre/pen/BaogjrM?editable=true&editors=101

【问题讨论】：

您需要在代码中的哪个位置访问元素？您是在渲染函数或模板中渲染作用域插槽吗？如果您可以提供一些示例代码来说明您正在尝试做什么，这将有所帮助，因为答案取决于您的情况。
我已更新问题以提供更多详细信息@DecadeMoon
这听起来好像插槽还没有安装。尝试等待渲染周期。等待这个。$nextTick()
我试过了
这里是复制链接：codepen.io/antoniandre/pen/…

标签： vue.js

【解决方案1】：

所以可以使用类似的方法来解决问题：

mounted () {
    const myEl = this.$scopedSlots.myelement()[0];
    if(myEl.data && myEl.data.attrs && myEl.data.attrs.id){
      const id = myEl.data.attrs.id    
      console.log([this.$el.querySelector('#id')])
    } else {
      throw new Error('slot myelement needs an id'); 
    }
  }

或强行应用一个id：

const Child = {

  render: function(h){
    const myEl = this.$scopedSlots.myelement()[0]
    myEl.data = {attrs: {id: 'id'}};
    console.log(myEl)
    return h('div', {}, [myEl])
  },

  mounted () {
      console.log([this.$el.querySelector('#id')])
  }
}

【讨论】：

感谢@Estradiaz，这是个好主意。但它会覆盖用户可能在其中输入的 id。附加一个类并删除它可以工作。我还在找好办法，不然我就选这个招了。
你也可以检查它是否已经有一个 id 并使用它或者添加一些 id 否则^^

【解决方案2】：

到目前为止，我发现的唯一解决方法是：

首先获取 scopedSlot 的 vnode，获取其给定的上下文，爬取上下文的每个 vnode 子节点，通过 _uid 键找到自己，该键将包含 $el 挂载元素。这不是很简单，但可以解决问题。

mounted () {
    const { context } = this.$scopedSlots.activator()[0]
    console.log(context.$children.find(vnode => vnode._uid === this._uid).$el)
}

我在 Vue 论坛和 Vue 聊天中询问过，但我仍在寻找更好的方法，如果有请告诉我。

【讨论】：

更多详情：

复制链接：