如何从下拉子组件中获取点击的元素？

Question

我有这个组件，即下拉菜单：

<template>
  <div class="dropdown-menu" v-click-outside="close">
    <p class="paragraph medium dropdown-default-value" @click="$emit('show')">
      <span>{{ defaultValue }}</span>
    </p>
    <div v-if="showContent" class="dropdown-menu-content">
      <div v-for="item in dropdownItems">
        <p class="paragraph medium drop-item" @click="pick(item)">{{ item }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import vClickOutside from 'v-click-outside';
export default {
  name: "Dropdown",
  directives: {
    clickOutside: vClickOutside.directive
  },
  props: {
    defaultValue: String,
    dropdownItems: Array,
    showContent: Boolean,
    onShow: Boolean
  },
  methods: {
    close() {
      this.$emit('close')
    },
    pick(item) {
      this.$emit('pick', item)
    }
  }
}
</script>

这是带道具的子组件，在父组件中是这样的：

<Dropdown
  :default-value="item.default"
  :show-content="item.show"
  :dropdown-items="item.items"
  @show="item.show = !item.show"
  @close="item.show = false"
  @pick="pick(item)"
/>
...
export default {
  name: "settings",
  data() {
    return {
      settingsOptions: [
        { title: 'Language', text: 'Interface language', show: false, default: 'English', items: ['English', 'Russian', 'Polish'] },
        { title: 'Theme', text: 'Chose dark or light theme', show: false, default: 'Dark', items: ['Dark', 'Light'] },
        { title: 'Default currency', text: 'Chose default currency for pages, etc.', show: false, default: 'EUR', items: ['EUR', 'USD'] }
      ],
      showDropdown: false
    }
  },
  methods: {
    pick(item) {
      console.log(item)
    }
  }
}

问题出在pick函数中，我不知道如何实现它。你在这里看到的这段代码只是打印了整个项目，这是我所能得到的。我需要的是获取已单击的元素，当然使用 $emit。

如何在 $emit 中传递这个被点击的元素？

Answer 1

组件中的方法pick定义正确：

pick(item) {
   this.$emit('pick', item)
}

您需要做的就是在父组件中使用 $event 作为函数中的参数：

<Dropdown
  :default-value="item.default"
  :show-content="item.show"
  :dropdown-items="item.items"
  @show="item.show = !item.show"
  @close="item.show = false"
  @pick="pick($event)"
/>

如何从下拉子组件中获取点击的元素？

How to get clicked element from dropdown child component?

html

javascript

vue.js

vue-component