vue2.6的新slot语法与原slot表现不一致?

手里有一个组件是对 el-popover 进行扩展,读源码可以看到el-popover是这样判断reference

  mounted() {
    let reference = this.referenceElm = this.reference || this.$refs.reference;
    const popper = this.popper || this.$refs.popper;
    if (!reference && this.$slots.reference && this.$slots.reference[0]) {
      reference = this.referenceElm = this.$slots.reference[0].elm;
    }
    // 可访问性
    if (reference) {

也就是必须有reference才会继续调用接下去的方法。
之前我的做法很简单,用一个空div当作reference就能让它正常工作了

  <el-popover>
    <div slot="reference"></div>
  </el-popover>

可是我发现切换到vue2.6的新slot语法就失效了

  <el-popover>
    <template v-slot:reference><div></div></template>
  </el-popover>

我打印这个popover$slots.reference[0].elm,发现在新语法下是空的,请问这是什么原因引起的?是我使用姿势不对吗?

阅读 3.8k
推荐问题