Question

我有一个表组件，其中包含一个注入插槽的子标头组件：

<AqTable>
      <template slot="headers">
        <AqTableHeader checkbox @checked="checkAll" />
        <AqTableHeader @click="sort('name')" text="Name" />
        <AqTableHeader @click="sort('dns')" text="DNS" />
        <AqTableHeader @click="sort('status')" text="Status" />
        <AqTableHeader @click="sort('last')" text="Last Seen" />
      </template>

</AqTable>

AqTableHeader（仅限相关部分）：

<template>
  <th :class="{small: checkbox}" v-on="$listeners">
    <AqCheckbox v-if="checkbox" v-model="checkAll" />
    <div class="flex" v-if="!checkbox">
      <span v-text="text"></span>
      <div class="sort" v-if="sort">
        <AqIcon icon="triangle-up" class="top" small v-if="isAsc"/>
        <AqIcon icon="triangle-down" class="bottom" small v-if="!isAsc"/>
      </div>
    </div>
  </th>
</template>

<script>
import { AqIcon, AqCheckbox } from "comp/common";
export default {

  props: {
   ...
  },
  data() {
    return {
      isAsc: false
    };
  }
};
</script>

正如您所看到的，当用户单击标题组件时，他使用他传递的参数调用sort方法（@click="sort('name')"）我还希望能够从子组件传递isAsc状态。

有没有办法使用$ listeners拦截标题组件中的click并使用额外的参数调用它？

Answer 1

我会使用数据属性来做。

首先，将$event param添加到sort方法。这将是click事件的事件对象。

<AqTableHeader @click="sort('name',$event)" text="Name" />

在AqTableHeader中，添加isAsc

的数据属性

<template>
    <th :class="{small: checkbox}" v-on="$listeners" :data-is-asc="isAsc">
        <!-- ... -->
    </th>
</template>

并在sort方法中，使用事件参数

获取isAsc

    sort(type,$event) {
        const isAsc = $event.target.dataset.isAsc;
        // ... other logic
    }

Vue：从具有额外参数的子项调用父函数

1 个答案: