Vue：使用额外参数从子调用父函数答案

【问题标题】：Vue: call a parent function from child with extra paramVue：使用额外参数从子调用父函数
【发布时间】：2018-09-25 06:56:22
【问题描述】：

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

<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拦截header组件中的点击，并通过额外的参数调用它？

【问题讨论】：

我认为如果他们按照您在上面定义的方式定义点击处理程序，您将无法做任何您想做的事情。但是，如果他们将处理程序简单地设置为函数引用，那么您可以让该字段从其他地方排序并传递您想要的任何其他内容。 Here is an example of what I mean.
这似乎很复杂。如果您希望使用能够定义排序机制，也许他们提供排序方法的属性更合适。
我猜你是对的，我将只传递一个排序字段属性，谢谢。

标签： vue.js vuejs2 vue-component

【解决方案1】：

我会使用数据属性来做到这一点。

首先，将$event 参数添加到sort 方法。这将是点击事件的事件对象。

<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
    }

【讨论】：

这是个好主意，但我宁愿有一个更简洁的解决方案，让用户不必知道如何获得排序方向。