Переопределение события @dblclick при использовании в другом компоненте

Question

Есть у меня компонент Table.vue. Для каждой строки таблицы есть следующие обработчики:

Table.vue

<tr v-for="(item, index) in data" :key="index" :class="`row-${index}`" :id="`row-${index}`"
                @dblclick="viewDoc(item)"
                @click="rowClick(item, $event)"

            >

Как мне сделать так, чтобы вызывая данный компонент в другом компоненте переопределить метод в событии dblclick на другой метод?

Clients.vue

<table
            :tableName="'clients'"
            :header-fields="getClientsHeaderFields"
            :sort-field="null"
            :sort="null"
            :data="getClientsData || []"

          ></table>

Answer 1

Просто для разных экземпляров вашего компонента используйте разные методы в качестве входных параметров:

<xtable @dblclick="method1"></xtable>
<xtable @dblclick="method2"></xtable>

Вот вам пример, один компонент использует разные методы:

Vue.component('xtable', {
  template: `
    <table>
      <caption>
        <slot name="caption"></slot>
      </caption>
      <tr>
        <td v-for="i in 3" @dblclick="$emit('dblclick')">
          td {{ i }}
        </td>
      </tr>
    </table>
  `,
})

new Vue({
  el: '#app',
  data: {},
  methods: {
    method1() {
      console.log('run method1')
    },
    method2() {
      console.log('run method2')
    },
  },
})

.flex {
  display: flex;
  flex-direction: row;
}

.flex>table {
  flex: 1 1 auto;
}

td {
  background: #eee;
  cursor: pointer;
  padding: 10px;
}

.tbl2 td {
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app" class="flex">
  <xtable class="tbl1" @dblclick="method1">
    <div slot="caption">
      Таблица 1 (двойной клик на ячейках запускает method1 из родительского компонента )
    </div>
  </xtable>
  <xtable class="tbl2" @dblclick="method2">
    <div slot="caption">
      Таблица 2 (двойной клик на ячейках запускает method2 из родительского компонента )
    </div>
  </xtable>
</div>

Не используйте в качестве названия пользовательских компонентов названия тегов HTML

Дополнение:

А если метод, который нужно вызвать находится в дочернем компоненте?

Второй пример (если дочерний компонент не получает события @dblclick от родителя, то выполняет собственный метод)

Vue.component('xtable', {
  methods: {
    viewDoc(item) {
      if ('dblclick' in this.$listeners) {
        this.$emit('dblclick');
      } else {
        this.method2();
      }
    },
    method2() {
      console.log('run method2')
    },
  },
  template: `
    <table>
      <caption>
        <slot name="caption"></slot>
      </caption>
      <tr>
        <td v-for="i in 3" @dblclick="viewDoc($event)">
          td {{ i }}
        </td>
      </tr>
    </table>
  `,
})

new Vue({
  el: '#app',
  data: {},
  methods: {
    method1() {
      console.log('run method1')
    },
  },
})

.flex {
  display: flex;
  flex-direction: row;
}

.flex>table {
  flex: 1 1 auto;
}

td {
  background: #eee;
  cursor: pointer;
  padding: 10px;
}

.tbl2 td {
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app" class="flex">
  <xtable class="tbl1" @dblclick="method1">
    <div slot="caption">
      Таблица 1 (двойной клик на ячейках запускает method1 из родительского компонента )
    </div>
  </xtable>
  <xtable class="tbl2">
    <div slot="caption">
      Таблица 2 (двойной клик на ячейках запускает method2 из родительского компонента )
    </div>
  </xtable>
</div>

БЛОГ НА HUSL

Переопределение события @dblclick при использовании в другом компоненте

Ответы (1 шт):