vue.js - 有没有办法访问 Vue $scopedSlots 挂载的 DOM 元素？

Question

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

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

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

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

谢谢

---

更多详情:

父模板(Pug)

child-component
  template(v-slot:myelement="{ on }")
    span My element content

子组件

  mounted () {
    console.log(this.$scopedSlots.myelement()[0])
    // From here I want to get the position of the span with
    // span.getBoundingClientRect()
  }

---

转载链接:

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

Answer 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')])
  }
}