上节课我们学习了，通过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>
