如何在 VueJS 中发出事件？

Question

I am using Vuetify to render a table. Now i have divided the table in two components:- Table component and the Row component. If i don't break it down into two separate component, i have an onclick that i can simply call this.selected =.this.selected! on a tr in this pen . But how can i emit the same function when there's 2 different components?

Check out this complete sandbox .

This is my Table component:-

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

This is my row component:-

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

<script>
export default {
  props: {
    active: Boolean,
    selected: Boolean,
    name: String,
    calories: Number,
    fat: Number
  }
};
</script>

And this is my Vuex store:-

state: {
    headers: [
      { text: "Dessert (100g serving)", align: "left", value: "name" },
      { text: "Calories", value: "calories" },
      { text: "Fat (g)", value: "fat" }
    ],
    tableItems: [
      { name: "Frozen Yogurt", calories: 159, fat: 6.0 },
      { name: "Ice cream sandwich", calories: 237, fat: 9.0 }
    ]
  },
  getters: {
    getHeaders: state => state.headers,
    getTableItems: state => state.tableItems
  },

Any help will be appreciated. Thank you.

Answer 1

Since you want to listen to the click event of the TR element, you don't need to emit an event or anything, you can do something like:

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

that @click.native means that it will listen for the click event on the wrapper html element inside the template of the component