Vue.js中v-for动态插槽$slots.default()[0].el为空问题求助

我尝试访问通过v-for渲染的动态插槽内容对应的HTMLElement，但el始终返回null。

复现代码 #

app.vue：

<template>
  <div id="app">
    <prod>
       <span>
         <div v-for="item in items">{{item.title}}</div>
       </span>
    </prod>
  </div>
</template>

<script>
export default {
  data: () => {
    return { items: [{ title: '1' }, { title: '2' }] };
  }
}
</script>

prod.vue：

<template>
  <slot></slot>
</template>

<script>
export default {
  mounted() {
    console.log(this.$slots.default()[0].el); // 输出null
  }
}
</script>

但如果把插槽内容改成硬编码的静态内容，就能正常获取到el：

<prod>
   <span>
     <div>a</div><div>b</div>
   </span>
</prod>

核心原因是：v-for渲染的动态内容属于Vue的异步DOM更新流程，组件mounted钩子执行时，动态插槽的DOM还没完成挂载，所以$slots里的el还是null。可以用以下两种方法解决：

方法1：用$nextTick等待DOM更新完成 #

在mounted里通过$nextTick延迟获取元素，确保动态渲染的DOM已经挂载完毕：

// prod.vue
<script>
export default {
  mounted() {
    this.$nextTick(() => {
      console.log(this.$slots.default()[0].el); // 正常获取到span元素
    });
  }
}
</script>

方法2：监听数据变化（适配动态更新场景） #

如果父组件的items后续会修改，需要监听插槽内容的更新，结合watch和$nextTick实现：

// prod.vue
<script>
export default {
  mounted() {
    this.getSlotElement();
  },
  methods: {
    getSlotElement() {
      this.$nextTick(() => {
        const slotElement = this.$slots.default?.[0]?.el;
        if (slotElement) {
          console.log(slotElement);
        }
      });
    }
  },
  watch: {
    // 监听父组件items变化（推荐通过props传递items，替代$parent访问）
    '$parent.items': {
      handler() {
        this.getSlotElement();
      },
      deep: true
    }
  }
}
</script>

补充说明 #

• 静态插槽内容在组件挂载时就已完成渲染，所以mounted里能直接拿到el；而v-for动态内容依赖数据驱动，必须等待下一次DOM更新周期才能获取真实元素。
• 实际开发中建议先判断this.$slots.default是否存在，避免数组越界报错。

内容的提问来源于stack exchange，提问作者user4254398