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')
      }
   }
}

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

到目前为止我尝试过的

我尝试在父级中设置“ ref”属性。但是我不能在子组件中引用这个道具。有办法吗？没有像this.ref或this。$ ref属性那样的东西。
我尝试在父级中使用$ event.targetElement，但看起来我正在将Real DOM和Vue组件混合在一起。 $ event.targetElement是类似的DOM。因此，在父级中，我必须越过树直到找到下拉列表。我猜这很丑。
我为下拉菜单设置了附加的：id属性，使其成为'ref'属性的副本。在blick中，我将其称为this。$ emit（'dd-global-click'，this.id）。稍后在父级中，我检查this。$ refs [id]。我有点工作，但我并不满意，因为我必须镜像属性。
使用_uid属性也不起作用。最重要的是，我认为，由于它以下划线开头，因此不建议这样做。

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

Answer 1

如果此自定义下拉菜单元素是组件中的顶级元素（根元素），则可以通过{{3}访问本机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>

如何在Vue中从父级引用子级组件

1 个答案: