javascript - 如何在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")
     }
   }
}

child

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

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

在父组件中，我需要查看单击了哪个下拉列表。

到目前为止我已经尝试过

1. 我尝试在父级中设置“ref”属性。但我无法在子组件中引用此 Prop 。有办法做到吗？没有像 this.ref 或 this.$ref 属性这样的东西。

2. 我尝试在父级中使用 $event.targetElement，但看起来我将 Real DOM 和 Vue 组件混合在一起。 $event.targetElement 是一个类似于 的 DOM。因此，在父级中，我必须遍历树，直到找到下拉列表。我觉得很难看。

3. 我为下拉列表设置了一个额外的 :id 属性，使其成为“ref”属性的副本。在 block 中，我调用了 this.$emit('dd-global-click', this.id)。稍后在父级中我检查 this.$refs[id]。我有点工作，但我并不真正满足，因为我必须镜像属性。

4. 使用 _uid 属性也不起作用。最重要的是，我认为，由于它以下划线开头，所以不推荐这样做。

这似乎是一项非常基本的任务，因此必须有一种更简单的方法来实现这一目标。

Answer 1

如果此自定义下拉元素是组件中的顶层元素(根元素)，则您可以访问 native DOM 属性(例如 id、class 等) )通过 this.$el ，一旦安装。

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>