从 vue-router 发出事件

Question

我有两个组件：MyItem.vue 和 ChangeItem.vue。 我试图在 ChangeItem.vue 和组件中发出一个事件，并在 MyItem.vue 组件中捕获它。 但不工作。

MyItem.vue

<template>
    <v-card>
        <p>Hello</p>
    </v-card>
     <v-card>
        <router-view name="areas.change" v-on:onchangeitem="test"></router-view>
     </v-card>
</template>

<script>
  export default {
    data(){
        return {
          item: [
        }
    },
    methods: {
        test: function() {
            console.log("my event")
        },
        
    },
  }
</script>

更改项.vue

<template>
    <v-row align="center" justify="center" class="pa-15">
        <button @click="onClickBtnValidate">click</button>
    </v-row>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
      onClickBtnValidate: function() {
          this.$router.app.$emit('onchangeitem')
      }
  },
  
};
</script>

Answer 1

首先，发出事件就足够了

this.$emit('onchangeitem')

无论如何，你为什么不尝试直接从 MyItem 组件调用你的 ChangeItem 组件，我认为这是你的主要问题，如果你要尝试这个，请记住在 vue object 的组件部分中注册组件。