使用 v-slot (scoped-slot) 时访问 this.$slots

Posted 2023-02-23

【中文标题】使用 v-slot (scoped-slot) 时访问 this.$slots

【英文标题】：Access this.$slots while using v-slot (scoped-slot)

【发布时间】：2020-10-24 05:34:05

【问题描述】：

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

现在我添加了一个 scoped-slot 来访问组件内的数据，这导致 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>

【参考方案1】：

使用$scopedSlots，包括作用域槽和非作用域槽：

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

demo

【讨论】：

这并不能解决问题，因为在使用作用域插槽时，.elm 属性是 undefined。但我需要它来计算内容的宽度和高度。

@SUBHUMAN 我假设.elm 是您选择的组件的自定义属性。 $scopedSlots.default() 返回与最初使用 this.$slots.default 相同的数组结果，因此 this.$slots.default[0].elm 的等价物是 $scopedSlots.default()[0].elm。

根据这个 github 问题 (github.com/vuejs/vue/issues/9580) 在作用域插槽中访问 .elm 不推荐，因为这是“变化”

我必须澄清一下，通过以下代码我得到了我想要的东西，所以我会将你的答案标记为正确：js const context = this.$scopedSlots.default()[0]; this.slotDomElement = context.$children.find((vnode) => vnode._uid === this._uid).$el;