从下拉组件捕获事件在父级中不起作用

问题描述

我正在使用这个很棒的 https://www.creative-tim.com/product/vue-black-dashboard-pro 并且它们的组件 Base-Dropdown 具有以下代码：

<template>
  <component :is="tag"
             class="dropdown"
             :class="{show:isOpen}"
             @click="toggleDropDown"
             v-click-outside="closeDropDown">
    <slot name="title-container" :is-open="isOpen">
      <component
        :is="titleTag"
        class="dropdown-toggle btn-rotate"
        :class="titleClasses"
        :aria-expanded="isOpen"
        :aria-label="title || ariaLabel"
        data-toggle="dropdown">
        <slot name="title" :is-open="isOpen">
          <i :class="icon"></i>
          {{title}}
        </slot>
      </component>
    </slot>
    <ul class="dropdown-menu" :class="[{show:isOpen},{'dropdown-menu-right': menuOnRight},menuClasses]">
      <slot></slot>
    </ul>
  </component>
</template>
<script>
  export default {
    name: "base-dropdown",props: {
      tag: {
        type: String,default: "div",description: "Dropdown html tag (e.g div,ul etc)"
      },titleTag: {
        type: String,default: "button",description: "Dropdown title (toggle) html tag"
      },title: {
        type: String,description: "Dropdown title",},icon: {
        type: String,description: "Dropdown icon"
      },titleClasses: {
        type: [String,Object,Array],description: "Title css classes"
      },menuClasses: {
        type: [String,Object],description: "Menu css classes"
      },menuOnRight: {
        type: Boolean,description: "Whether menu should appear on the right"
      },ariaLabel: String
    },data() {
      return {
        isOpen: false
      };
    },methods: {
      toggleDropDown() {
        this.isOpen = !this.isOpen;
        this.$emit("change",this.isOpen);
      },closeDropDown() {
        this.isOpen = false;
        this.$emit('change',false);
      }
    }
  };
</script>

现在在另一个组件中，我们将其命名为“AddAccount.vue”，我正在使用该 Base-Dropdown 组件，但我似乎无法捕捉到“更改”事件。我什么都试过了。

 computed: {
    listeners() {
      return {
        ...this.$listeners,change: this.onChange,}
    }
  },methods: {
    onChange(evt) {
      console.log(":P:")
    },

或

  computed: {
    change(evt) {
      console.log(":P:")
    }
  },

或

  methods: {
    change(evt) {
      console.log(":P:")
    },

在那个组件中没有任何东西被捕获，但是如果我在 Base-Dropdown.vue 中做一个断点，它就会被捕获......！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）