[ Vue ] 给 slot 插槽绑定事件

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

最终效果图如下:

方案一:slot-scope 传方法

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

<template>
    <slot change-display="changeDisplay"></slot>
    <div v-show="mVisiable">*下拉框代码省略*<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>
    <slot></slot>
    <div v-show="mVisiable">*下拉框代码省略*<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>
    <slot></slot>
    <div v-show="mVisiable">*下拉框代码省略*<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>

 

相关推荐
<p> <b><span style="font-size:14px;"></span><span style="font-size:14px;background-color:#FFE500;">【Java面试宝典】</span></b><br /> <span style="font-size:14px;">1、68讲视频课,500道大厂Java常见面试题+100个Java面试技巧与答题公式+10万字核心知识解析+授课老师1对1面试指导+无限次回放</span><br /> <span style="font-size:14px;">2、这门课程基于胡书敏老师8年Java面试经验,调研近百家互联网公司及面试官的问题打造而成,从筛选简历和面试官角度,给出能帮助候选人能面试成功的面试技巧。</span><br /> <span style="font-size:14px;">3、通过学习这门课程,你能系统掌握Java核心、数据库、Java框架、分布式组件、Java简历准备、面试实战技巧等面试必考知识点。</span><br /> <span style="font-size:14px;">4、知识点+项目经验案例,每一个都能做为面试的作品展现。</span><br /> <span style="font-size:14px;">5、本课程已经在线下的培训课程中经过实际检验,老师每次培训结束后,都能帮助同学们运用面试技巧,成功找到更好的工作。</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【超人气讲师】</b></span><br /> <span style="font-size:14px;">胡书敏 | 10年大厂工作经验,8年Java面试官经验,5年线下Java职业培训经验,5年架构师经验</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【报名须知】</b></span><br /> <span style="font-size:14px;">上课模式是什么?</span><br /> <span style="font-size:14px;">课程采取录播模式,课程永久有效,可无限次观看</span><br /> <span style="font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span><br /> <br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><strong>如何开始学习?</strong></span><br /> <span style="font-size:14px;">PC端:报名成功后可以直接进入课程学习</span><br /> <span style="font-size:14px;">移动端:<span style="font-family:Helvetica;font-size:14px;background-color:#FFFFFF;">CSDN 学院APP(注意不是CSDN APP哦)</span></span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页