vue方法调用th数据

可以通过以下步骤调用Vue组件中th数据的方法：

1. 在Vue组件中定义th数据，并在methods中定义一个方法来获取该数据：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" @click="sortTable(index)">
          {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sortedItems" :key="row.id">
        <td v-for="column in row">{{ column }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ["Name", "Age", "Gender"],
      items: [
        { id: 1, name: "John", age: 25, gender: "Male" },
        { id: 2, name: "Lisa", age: 32, gender: "Female" },
        { id: 3, name: "Tom", age: 18, gender: "Male" },
      ],
      sortColumn: null,
      sortOrder: "asc",
    };
  },
  methods: {
    sortTable(index) {
      if (index === this.sortColumn) {
        this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
      } else {
        this.sortColumn = index;
        this.sortOrder = "asc";
      }
    },
    getThData() {
      return this.headers;
    },
  },
  computed: {
    sortedItems() {
      if (!this.sortColumn) {
        return this.items;
      }
      return [...this.items].sort((a, b) => {
        const columnA = typeof a[this.sortColumn] === "string" ? a[this.sortColumn].toUpperCase() : a[this.sortColumn];
        const columnB = typeof b[this.sortColumn] === "string" ? b[this.sortColumn].toUpperCase() : b[this.sortColumn];
        if (columnA > columnB) {
          return this.sortOrder === "asc" ? 1 : -1;
        } else if (columnA < columnB) {
          return this.sortOrder === "asc" ? -1 : 1;
        } else {
          return 0;
        }
      });
    },
  },
};
</script>

2. 在需要调用该方法的地方，通过this.$refs来获取组件实例，并调用getThData方法获取th数据：

<template>
  <div>
    <table-component ref="tableComponent"></table-component>
    <button @click="handleClick">获取表头</button>
  </div>
</template>

<script>
import TableComponent from "@/components/TableComponent.vue";

export default {
  components: {
    TableComponent,
  },
  methods: {
    handleClick() {
      const tableComponent = this.$refs.tableComponent;
      const headers = tableComponent.getThData();
      console.log("表头数据", headers);
    },
  },
};
</script>

3. 注意：在获取组件实例时，需要给组件添加ref属性，以便通过this.$refs来获取实例。在调用getThData方法时，需要在实例名后添加方法名，以便正确调用方法。