时间戳

首页 > 解决方案 > 识别组件的嵌套位置

javascript - 识别组件的嵌套位置

问题描述

在我的页面上，我有几个相同组件的实例：

<v-date-picker 
  @click:date="myMethod"
></v-date-picker>

new Vue({

  el: '#app',
  vuetify: new Vuetify(),

  methods: {
    myMethod: function (value) {

      // Get nested components
      // i.e. ['v-app', 'v-content', 'v-sidebar', 'v-date-picker']

    },

...

我想做的是确定正在与哪个日期选择器进行交互。例如，我在页面上嵌入了一个，而在侧边栏中有另一个。

我希望我基本上可以通过一种不需要每个组件中的代码的方式来做到这一点——有没有办法遍历全局 Vue 对象来获取我正在寻找的数据？

标签： javascriptvue.js

解决方案

您可以使用event.currentTarget返回您与之交互的元素：

new Vue({
  el: '#app',
  methods: {
    doStuff() {
      console.clear()
      console.log(event.currentTarget)
    }
  } 
})
div div {border: 1px solid #ccc; padding: 4px; margin: 5px; cursor: pointer; display: inline-block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div @click="doStuff()">Hellooo</div>
  <div @click="doStuff()">Goodbyeee</div>
</div>

或者

您可以使用该ref属性并访问this.$refs对象中的元素：

new Vue({
  el: '#app',
  methods: {
    doStuff() {
      console.clear()
      console.log(this.$refs)
    }
  } 
})
div div {border: 1px solid #ccc; padding: 4px; margin: 5px; cursor: pointer; display: inline-block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div @click="doStuff()" ref="div1">Hellooo</div>
  <div @click="doStuff()" ref="div2">Goodbyeee</div>
</div>

推荐阅读