上节课我们学习了，通过props，父组件就可以向子组件传递数据，这节课我们来学习子组件向父组件传递数据。
我们还在上节课的代码上修改，复制一下hero.vue文件，叫做hero2.vue，并且在App.vue引入的时候记着把文件名也改成hero2.vue。

1）发送事件

$emit是vue实例的一个方法，子组件使用这个方法就可以可以发送一个事件，
现在的子组件的功能是点击后计数就加一，我们增加一个功能，在计数加一后，发送一个事件，告诉父组件计数变化了。

    onClick() {
      this.count++
      this.$emit('countChanged') // 发送事件
    },

使用this.就可以调用$emit方法，大家可以先记住使用$开头的方法或者属性，说明是vue自带的方法或者属性，是vue框架给我们提供的
在调用$emit时，传递了一个参数‘countChanged’，这个是我们自定义的事件的名字

这里需要注意的是，在vue3中新增了emits属性，要先在emits中声明我们在组件中要发送的自定义事件

<script>
  export default {
    emits: ['countChanged']
  }
</script>

像这样就可以了，它是一个数组，如果需要发送多个事件，在数组中写多个值就行了。

第二步就是在父组件中监听这个事件了，跟我们之前学习的监听鼠标点击的事件一样，只不过鼠标点击的事件名字叫做click，我们自定义的事件名字叫做countChanged
App.vue中增加监听事件：

// template部分
<hero :heroName="item" @countChanged="onCountChanged"></hero>

// script部分
  methods: {
    onCountChanged() {
      console.log('父组件接受了子组件的事件')
    },
  },

这时候点击子组件，在计数增1的同时，控制台也会输出‘父组件接受了子组件的事件’，说明子组件发送了事件，并且父组件接受到了。

2）传递参数

现在子组件只是告诉了父组件计数发生变化了，但是具体计数是多少，父组件并不知道，现在我们增加在发送事件的同时，传递参数，把当前的计数发给父组件
只要在调用$emit时，多传递一个参数就行了

    onClick() {
      this.count++
      this.$emit('countChanged', this.count) // 发送事件,多传了一个参数，值就是我们的计数
    },

下面父组件要接收这个参数

    onCountChanged(count) { // 事件的回调函数增加了参数
      console.log('父组件接受了子组件的事件,并得到当前票数为：' + count)
    },

回调函数增加了参数，事件发生时，调用回调事件，会把事件发送的参数传过来，控制台就打印出来相应的内容

父组件接受了子组件的事件,并得到当前票数为：1
这时只传递了一个参数，只有票数，父组件还想知道这个票数是谁的，那么就要再传一个参数，我们只要在调用$emit时，再多传一个，在父组件中再多接受一个

    onClick() {
      this.count++
      this.$emit('countChanged', this.count, this.heroName) // 发送事件,再多传一个参数，是英雄的名字
    },

    onCountChanged(count, heroName) {
      // 回调函数现在有两个参数，票数和超级英雄的名字
      console.log(heroName + '得到了' + count + '票')
    },

点击后输出

蝙蝠侠得到了1票

到现在，我们学习了props，父组件向子组件传递数据

使用emit子组件向父组件传递数据，

实现了父子组件的双向通信

完整的代码
hero2.vue

<template>
  <div @click="onClick" class="counter-btn">
    {{ heroName }}的票数是：{{ count }}，点击增加
  </div>
</template>

<script>
export default {
  emits: ['countChanged'], // 声明本组件中会发送的事件，vue3新增
  props: {
    heroName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      count: 0,
    }
  },
  mounted() {
    // console.log(this.heroName)
  },
  methods: {
    onClick() {
      this.count++
      this.$emit('countChanged', this.count, this.heroName) // 发送事件,再多传一个参数，是英雄的名字
    },
  },
}
</script>

<style>
.counter-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  border-radius: 5px;
  cursor: pointer;
}
</style>

App.vue

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" class="list-item">
        <hero :heroName="item" @countChanged="onCountChanged"></hero>
      </li>
    </ul>
  </div>
</template>

<script>
import hero from './components/hero2.vue'
// 组件基础
export default {
  name: 'App',
  components: {
    hero,
  },
  data() {
    return {
      list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
    }
  },
  methods: {
    onCountChanged(count, heroName) {
      // 回调函数现在有两个参数，票数和超级英雄的名字
      console.log(heroName + '得到了' + count + '票')
    },
  },
}
</script>

<style>
.list-item {
  margin: 10px;
}
</style>