Question

我当前正在使用Vue-datatable，其中有一个通用vue组件，如。我正在使用此基本组件来呈现数据表，并且在元素中有一个@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组件，并在有人单击method内的按钮时要执行DataTable

简单-

<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覆盖click事件

1 个答案: