[ Vue ] 给 slot 插槽绑定事件

最新推荐文章于 2025-04-23 22:41:59 发布

ljw1412

最新推荐文章于 2025-04-23 22:41:59 发布

阅读量1.6w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue vnode vue2

本文链接：https://blog.csdn.net/ljw1412/article/details/102502302

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在Vue中实现下拉组件的两种方法：通过slot-scope传递方法和直接操作VNode中的元素。对比分析了两种方案的优缺点，并详细介绍了如何在不使用插槽作用域的情况下，为组件的触发元素添加点击事件来控制组件的显示状态。

最近写了一个下拉组件，希望任意形式的触发源点击都可以展开这个组件。

最终效果图如下：

方案一：slot-scope 传方法

<!-- 伪代码:下拉框组件 -->

<template>
    <div>
        <slot :change-display="changeDisplay"></slot>
        <div v-show="mVisiable">*下拉框代码省略*</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            mVisiable: false
        }
    },

    methods:{
        changeDisplay(){
            this.mVisiable = !this.mVisiable
        }
    }
}
</script>

<!--使用下拉弹窗组件-->
<dropdown v-model="value" :list="list">
      <button slot-scope="{changeDisplay}" 
        @click="changeDisplay">{{value}}</button>
</dropdown>

不过这就导致每次用插槽都要写 slot-scope 去取修改显示状态的函数。

方案二：找 VNode 中对应的页面元素

插曲：

<!-- 伪代码:下拉框组件 -->
<template>
    <div>
        <slot></slot>
        <div v-show="mVisiable">*下拉框代码省略*</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            mVisiable: false
        }
    },

    methods:{
        changeDisplay(){
            this.mVisiable = !this.mVisiable
        }
    },

    mounted() {
      console.log(this.$slots)
    }
}
</script>


<!--使用下拉弹窗组件-->
<dropdown v-model="value" :list="list">
  <template v-slot>
    <button>{{value}}</button>
  </template>
</dropdown>

根据vue文档 slot 被废弃了(但还是兼容的)使用 v-slot 指定插槽，但是输出VNode 中的 elm 是 undefined。

然后去查找 github vue issues 找到如下回答，传送门: issue

最后换回旧的插槽方法

<!--使用下拉弹窗组件-->
<dropdown v-model="value" :list="list">
    <button>{{value}}</button>
</dropdown>

此时得到了插槽内的元素

修改下拉组件。为VNode中的elm增加点击事件。

<!-- 伪代码:下拉框组件 -->
<template>
    <div>
        <slot></slot>
        <div v-show="mVisiable">*下拉框代码省略*</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            mVisiable: false,
            reference: undefined
        }
    },

    methods:{
        changeDisplay(){
            this.mVisiable = !this.mVisiable
        }
    },

    mounted() {
        if (this.$slots.default) {
          this.reference = this.$slots.default[0].elm
        }
        if (this.reference) {
          this.reference.addEventListener('click', this.changeVisiable, false)
        }
    },

    beforeDestroy() {
        if (this.reference) {
          this.reference.removeEventListener('click', this.changeVisiable, false)
        }
    }
}
</script>