Vue中如何從父組件引用子組件

Question

我試圖找出從父處理程序引用子級的 Vue 方式。

家長

<div>
<MyDropDown ref="dd0" @dd-global-click="ddClicked"></MyDropDown>
<MyDropDown ref="dd1" @dd-global-click="ddClicked"></MyDropDown>
<MyDropDown ref="dd2" @dd-global-click="ddClicked"></MyDropDown>
</div>

export default {
   methods: {
     ddClicked: function(id) {
          console.log("I need to have MyDropDown id here")
     }
   }
}

孩子

<template>
<h1>dropdown</h1>
<Button @click="bclick"></Button>
</template>

export default {
   methods: {
      bclick: function() {
            this.$emit('dd-global-click')
      }
   }
}

在父組件中，我需要查看單擊了哪個下拉菜單。

到目前為止我嘗試過的

1. 我試圖在父級中設置“ref”屬性。 但是我不能在子組件中引用這個道具。 有沒有辦法做到這一點？ 沒有類似 this.ref 或 this.$ref 屬性的東西。

2. 我嘗試在父級中使用 $event.targetElement，但看起來我正在將 Real DOM 和 Vue 組件混合在一起。 $event.targetElement 是一個類似於 . 因此，在父級中，我必須遍歷樹，直到找到下拉列表。 我猜這很難看。

3. 我為下拉菜單設置了一個額外的 :id 屬性，使其成為“ref”屬性的副本。 在 blick 中，我調用了 this.$emit('dd-global-click', this.id)。 稍后在父級中，我檢查 this.$refs[id]。 我有點工作，但我並不滿足於此，因為我必須鏡像屬性。

4. 使用 _uid 屬性也沒有成功。 最重要的是，我認為，因為它以下划線開頭，所以不推薦使用它。

這似乎是一項非常基本的任務，因此必須有一種更簡單的方法來實現這一點。

Answer 1

如果此自定義下拉元素是組件中的頂級元素（根元素），則可以通過this.$el訪問本機 DOM 屬性（如id 、 class等），一旦它被mounted 。

 Vue.component('MyDropdown', { template: '#my-dropdown', props: { items: Array }, methods: { changed() { this.$emit('dd-global-click', this.$el.id); } } }) new Vue({ el: '#app', data: () => ({ items: [ { id: 'dropdown-1', options: ['abc', 'def', 'ghi'] }, { id: 'dropdown-2', options: ['jkl', 'lmn', 'opq'] }, { id: 'dropdown-3', options: ['rst', 'uvw', 'xyz'] } ] }), methods: { ddClicked(id) { console.log(`Clicked ID: ${id}`); } } }) Vue.config.devtools = false; Vue.config.productionTip = false;

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <div id="app"> <my-dropdown v-for="item of items" :key="item.id" :id="item.id" :items="item.options" @dd-global-click="ddClicked"> </my-dropdown> </div> <script id="my-dropdown" type="text/x-template"> <select @input="changed"> <option v-for="item of items" :key="item" :value="item"> {{item}} </option> </select> </script>