组件传值和监听事件

[xtzero]

请按照以下的模版填充相应的内容，一个 PR 会自动生成并保持与本 Issue 的内容同步。

你不需要提供详细的答案或教学，但请保证题目可解。

基本信息

# 题目难度
difficulty: medium

# 题目标题
title: 组件间传值

# 题目标签
tags: Components

题目

修改子组件中的 handleClick 方法，每次点击都让父元素中的 count 加一。

题目模版

filename: App.vue

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const count = ref(0)

const handleChildAdd = () => {
  count.value ++
}
</script>

<template>
  <div class="app-container">
    <div>修改子组件中的 `handleClick` 方法，每次点击都让父元素中的 `count` 加一。</div>
    <Child id="child" :btnText="`你已经点击了${count}次`" @add="handleChildAdd"></Child>
  </div>
</template>

<style scoped>

</style>

filename: Child.vue

<script setup>
const props = defineProps({
    btnText: {
        type: String,
        default: '按钮'
    }
})
const handleClick = () => {
    // 实现这个方法，变更父元素的 `count` 值
}
</script>

<template>
    <div class="child-container">
        <button @click="handleClick">{{ props.btnText }}</button>
    </div>
</template>