有什么方法可以通过 Vue.js 覆盖点击事件

Question

我目前正在使用 Vue-datatable，其中我有一个通用的 vue 组件作为 .我正在使用这个基本组件来呈现数据 table 并且我在元素中有一个 @click 事件。但是当我在不同的地方使用这个组件时，我希望 @click 事件被覆盖，这样我就可以根据需要调用 diffenent 方法。

下面的文件是BaseTable.vue

<v-app id="inspire">
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :pagination.sync="pagination"
    select-all
    item-key="name"
    class="elevation-1"
  >
    <template v-slot:headers="props">
      <tr>
        <th>
          <v-checkbox
            :input-value="props.all"
            :indeterminate="props.indeterminate"
            primary
            hide-details
            @click.stop="toggleAll"
          ></v-checkbox>
        </th>
        <th
          v-for="header in props.headers"
          :key="header.text"
          :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
          @click="changeSort(header.value)"
        >
          <v-icon small>arrow_upward</v-icon>
          {{ header.text }}
        </th>
      </tr>
    </template>
    <template v-slot:items="props">
      <tr :active="props.selected" @click="props.selected = !props.selected">
        <td>
          <v-checkbox
            :input-value="props.selected"
            primary
            hide-details
          ></v-checkbox>
        </td>
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </tr>
    </template>
  </v-data-table>
</v-app>
</template>```

Could I possibly override the triggercall method shown above in the code?
Thanks.

Answer 1

从您的组件触发一个 event，可以从父组件监听。

假设在你的 DataTable 组件中有 button 触发 click :

 <button @click="$emit('triggerClick')">
     Hey trigger when someone clicks me
 </button>`

现在你想使用 DataTable 组件，并希望在有人单击 DataTable

内的按钮时执行 method

简单 -

<Your-Component>

  <DataTable @triggerClick="yourMethodFoo"/>

</Your-component>

如果你想在组件内部使用 method 并且可以从父级覆盖它。那么这就是您想要的可选行为——就像您想要创建一个全局行为一样。

您需要一个额外的 prop 来告诉您的全局组件您希望方法被父方法覆盖。

props: {
  parentHandler: {
    type: Boolean,
    default: false
  }
}

methods: {
  triggerClick() {
    if (this.parentHandler) {
      this.$emit(triggerClick)
       return
    }
    // execute anything bydefault

  }
}

<button @click="triggerClick">
   Hey trigger when someone clicks me
</button>`

所以默认情况下你会执行你的默认 method 但如果你将 parentHandler= true 传递给组件它将执行父方法

<Your-Component>
  <DataTable :parentHandler="true" @triggerClick="yourMethodFoo"/>
</Your-component>

有什么方法可以通过 Vue.js 覆盖点击事件

is there any way that i can override the click event through Vue.js

javascript

events

vue.js

vue-data-tables