如何在 VueJS 中发出事件？

Question

我正在使用 Vuetify 来呈现表格。现在我将表格分为两个组件：Table组件和Row组件。如果我不把它分解成两个独立的组件，我有一个onclick我可以简单地在这支笔this.selected = !this.selected!中调用的一个。但是当有 2 个不同的组件时，我怎样才能发出相同的功能呢？tr看看这个完整的沙箱。这是我的表格组件：-<template>  <div class="hello">    <v-container>      <v-layout>        <v-data-table          v-model="selected"          :headers="getHeaders"          :items="getTableItems"          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">                <v-icon small>arrow_upward</v-icon>                {{ header.text }}              </th>            </tr>          </template>          <template v-slot:items="props">            <Row              :active="props.active"              :selected="props.selected"              :name="props.item.name"              :calories="props.item.calories"              :fat="props.item.fat"            />          </template>        </v-data-table>      </v-layout>    </v-container>  </div></template><script>import { mapGetters } from "vuex";import Row from "./Row";export default {  name: "Table",  components: {    Row  },  data() {    return {      selected: []    };  },  computed: {    ...mapGetters({      getHeaders: "getHeaders",      getTableItems: "getTableItems"    })  },  methods: {    toggleAll() {      if (this.selected.length) this.selected = [];      else this.selected = this.getTableItems.slice();    }  }};</script>这是我的行组件：-<template>  <tr :active="active">    <td>      <v-checkbox :input-value="selected" primary hide-details></v-checkbox>    </td>    <td>{{name}}</td>    <td>{{calories}}</td>    <td>{{fat}}</td>  </tr></template>任何帮助将不胜感激。谢谢你。

Answer 1

由于您想监听 TR 元素的单击事件，因此不需要发出事件或任何东西，您可以执行以下操作：

<template v-slot:items="props">

  <Row

    :active="props.active"

    :selected="props.selected"

    :name="props.item.name"

    :calories="props.item.calories"

    :fat="props.item.fat"

    @click.native="props.selected = !props.selected"

  />

</template>

这@click.native意味着它将侦听组件模板内包装器 html 元素上的单击事件