在使用v-slot (作用域-插槽)时访问此.$插槽

Question

在特定的用例中，我必须访问插槽中的DOM元素以获得其呈现的width和height。对于普通插槽，这是通过访问this.$slots.default[0].elm来实现的。

现在我添加了一个作用域插槽来访问组件内部的数据，这导致this.$slots为空并破坏了我的代码。

如何访问使用slot-scope的slot的DOM元素？

基本示例代码(请注意，使用作用域插槽时，this.$slots结果为{}；使用普通插槽时，结果为{default: Array(1)})：

App.vue

<template>
  <div id="app">
    <HelloWorld v-slot="{ someBool }">
      <p>{{ someBool }}</p>
      <h1>Hello</h1>
    </HelloWorld>
    <HelloWorld>
      <h1>Hello</h1>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
};
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <slot :someBool="someBool" />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      someBool: false,
    };
  },
  mounted() {
    console.log(this.$slots);
  },
};
</script>

Answer 1

使用$scopedSlots，它包括范围插槽和非范围插槽：

export default {
  mounted() {
    console.log(this.$scopedSlots.default())
  }
}

demo