如何在作用域插槽中获取refs元素

Question

如果插槽的模板中有一些引用，我如何从组件访问这些引用？例如：

v-component.vue

<template>
    <div>
        <slot></slot>
    </div>
</template>
<script>
   export default {
       created() {
           console.log(this.$refs.ele)
       }
   }
</script>

app.vue

<template>
    <v-component>
       <template slot-scope="props">
          <h1 ref="ele"></h1>
       </template>
    </v-component>
</template>
<script>
   import VComponent from './v-component
   export default {
       components: { VComponent }
   }
</script>

v-compoent.vue输出中的this.$refs.ele未定义。我的问题是如何获得这个元素？

Answer 1

命名为slot和scopedSlot的每个元素都有context.$refs。不要忘记先检查对象是否存在。

<template>
    <v-component>
        <template slot-scope="props">
            <h1 ref="ele">{{ props }}</h1>
        </template>
    </v-component>
</template>
<script>
import VComponent from './v-component'
export default {
    components: { VComponent }
}
</script>

和

<template>
    <div>
        <slot demo="foo"></slot>
    </div>
</template>
<script>
export default {
    created() {
        this.$nextTick(function() { // lazy
            console.warn(this.$scopedSlots.default()[0].context.$refs)
        });
    }
}
</script>

结果：

​

​

Answer 2

在Vue 2上，您可以在已挂载的

  mounted() {
    console.log(this.$slots)
  },

精度更高

你可以做到的

  mounted() {
    console.log(this.$slots.name_of_your_slot)
  },

Answer 3

这被Vue开发人员认为是一个坏主意：https://github.com/vuejs/vue/issues/7661

顺便说一句，在我的Vue3示例中，检索到的插槽的el条目

this.$refs.myRef.$slots['my-slot']().el

始终为空(作为appContext)