Vue父组件无法识别来自子组件的发射答案

【问题标题】：Vue parent component doesn't recognize emit from childVue父组件无法识别来自子组件的发射
【发布时间】：2020-11-14 09:51:29
【问题描述】：

I am trying to make a website which features multiple cards and when a card is selected it should expand. 卡片组件的代码是：

<template>
  
  <v-card
    class="mx-auto"
    max-width="90%"
    min-height="600"
    app
    @click="selectCard(id)"
  >
    <!-- <img v-bind:src="img" /> -->
    
    <v-img
      dark
      class="white--text align-end"
      height="400px"
      :src="require('../assets/' + img)"
      :alt="`${title}`"
      
    >
    </v-img>
    <v-card-title>
      <p class="text-wrap">{{title}}</p>
    </v-card-title>
    
    <v-card-subtitle class="pb-0">{{taglist}}</v-card-subtitle>

    <v-card-text class="text--primary">
      <div>{{text}}</div>
    </v-card-text>

    <v-card-actions>

      <v-btn
        color="orange"
        text
        @click="selectCard(id)"
      >
        Read More
      </v-btn>
    </v-card-actions>
  </v-card>
</template>


<script>
  export default {
    name: 'Card',
    computed: {
      taglist() {
        let list = "";
        for (let t of this.tags) {
          list = list + t + ", ";
        // console.log("TEST:" + (1===this.id))
        }
        
        list = list.substring(0, list.length-2);
        return list;
      }
    },
    methods: {
      selectCard(id) {
        this.$emit('expandCard',id)
      }
    },
    
    props: {
      title: String,
      tags: Array,
      img: String,
      text: String,
      id: Number,
    }
  }
</script>

而应该监听的父组件是：

<template>
  <div class="projects">
    
    <v-main>
      <v-row>
        <v-col 
          cols="12"
          sm="6"
          md="4"
          lg="4"
          v-for="data in info"
          :key="data.index"
          
        >
          <Card 
            :title="data.title"
            :tags="data.tags"
            :img="data.img"
            :text="data.text"
            :id="data.index"
          />
        </v-col>
      </v-row>
      
      <!-- <v-on:expandCard="showCard"/> -->
      <div> {{reached}} </div>
      
        <v-card 
          v-on:expandCard="showCard"
          v-if="dialog">
          <p> {{reached}}</p>
            <v-img
            dark
            class="white--text align-center"
            height="80%"
            :src="require('../assets/' + info[id].img)"
            :alt="`${info[id].title}`"
            
            >
            </v-img>
            <v-card-title>
            <p class="text-wrap">{{info[id].title}}</p>
            </v-card-title>
            
            <v-card-subtitle class="pb-0">{{info[id].tags}}</v-card-subtitle>

            <v-card-text class="text--primary">
            <div>{{info[id].text}}</div>
            </v-card-text>

            <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn text color="primary" @click="dialog = false">Return</v-btn>
            </v-card-actions>
        </v-card>
    </v-main>


  </div>
</template>

<script>
// @ is an alias to /src
import Card from '@/components/Card.vue'

export default {
  name: 'Projects',
  
    methods: {
      showCard(id) {
        this.dialog = true;
        this.id = id
        console.log(this.id)
      },
      reached() {
        console.log("reached")
      }
    }
</script>

我想要的是选择一张卡片，然后将卡片的 id 传递给父级，然后父级将该卡片呈现在所有其他卡片之上。

Vue dev tools

【问题讨论】：

你能在 v-on 监听器中为我试试这个语法吗v-on:expandCard="showCard " -> @expand-card="showCard"
但是您的 this，reference 似乎也关闭了，您没有数据属性可以保存它们。（在父元素中）。从技术上讲，它可以工作，但它不是凭空添加数据属性来定义数据属性的正确方法。您应该有一个 data() { return { dialog: false, id: null }} 供父级引用，这就是您引用回子级的内容，以进行潜在的样式更改。
我可能会因为没有使用过Vuetify而感到困惑，但是我并不清楚组件层次结构。您从中发送发射的子组件的名称是什么？为什么它没有在父组件的组件部分中列出？
该事件是从 Card 组件发出的，但您的侦听器位于父组件中的 v-card 上。侦听器应该在 Card 上。
@tony19 为修复它的伙伴欢呼，谢谢！把它记下来作为答案，并标记它已回答

标签： javascript vue.js vuetify.js

【解决方案1】：

该事件是从 Card 组件发出的，但您的侦听器位于父组件中的 v-card 上。监听器应该在Card 上：

<!-- BEFORE: -->
<!-- <v-card v-on:expandCard="showCard"> -->

<Card v-on:expandCard="showCard">

【讨论】：