如何在 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">&nbsp; <Row&nbsp; &nbsp; :active="props.active"&nbsp; &nbsp; :selected="props.selected"&nbsp; &nbsp; :name="props.item.name"&nbsp; &nbsp; :calories="props.item.calories"&nbsp; &nbsp; :fat="props.item.fat"&nbsp; &nbsp; @click.native="props.selected = !props.selected"&nbsp; /></template>这@click.native意味着它将侦听组件模板内包装器 html 元素上的单击事件