Question

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

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

如何使用slot-scope来访问插槽的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

使用v插槽（作用域插槽）时访问this。$ slots

1 个答案: