【Vue3】组件通信之自定义事件

    <template>
      <div class="parent">
    <h1>父组件</h1>
    <h2>Blog数量：{{ blogs.length }}</h2>
    <h2>浏览数量：{{ readTimes }}</h2>
    <!-- 给子组件绑定了一个 sync-read-times 事件，只要 sync-read-times 被触发，其指向的 syncReadTimes 函数就会被调用 -->
    <Blog :blogs="blogs" :author="author" @sync-read-times="syncReadTimes" />
      </div>
    </template>
    
    <script setup lang="ts">
    import Blog from './components/Blog.vue'
    import { reactive, ref } from 'vue'
    
    const author = ref('Nick')
    
    const blogs = reactive([
      { id: '001', title: '美国大选', content: '美国大选将于...' },
      { id: '002', title: '奥运奖牌', content: '截止今日奥运奖牌榜...' },
      { id: '003', title: '俄乌战争', content: '乌克兰单方面提出希望和谈...' },
      { id: '004', title: '巴以冲突', content: '巴以冲突最新战况...' },
    ])
    
    const readTimes = ref(0)
    
    function syncReadTimes(value) {
      readTimes.value += value
    }
    </script>
    
    <style scoped lang="scss">
    .parent {
      background-color: orange;
      padding: 20px;
    }
    </style>
    
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-18/6T8Ky2muHCULonsIEkrw3pzcev0g.png)

    <template>
    <div class="content">
        <h1>子组件</h1>
        <div class="blog" v-for="blog in blogs" :key="blog.id">
            <div class="blog-title">标题：{{ blog.title }}</div>
            <div class="blog-author">作者：{{ author }}</div>
            <div class="blog-content">{{ blog.content }}</div>
            <button @click="emits('sync-read-times', 1)">浏览量+1</button>
        </div>
    </div>
    </template>
    
    <script setup lang="ts">
    const data = defineProps(['author', 'blogs'])
    // 声明事件
    const emits= defineEmits(['sync-read-times'])
    </script>
    
    <style scoped lang="scss">
    .content {
    background-color: aquamarine;
    padding: 20px;
    .blog {
        border: 1px solid gray;
        border-radius: 5px;
        padding: 0 10px;
        margin-top: 5px;
        div {
            padding: 10px 5px;
        }
        .blog-title {
            font-weight: bold;
        }
        .blog-author {
            font-size: small;
            font-style: italic;
        }
        .blog-content {
            font-size: small;
        }
        button {
            margin: 10px 0;
        }
    }
    }
    </style>
    
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-18/3dm9xTgAu6IQbs7Pk8KDVz0F5Zqi.png)