15 - Vue 学习笔记 - 父子组件通信子传父(自定义事件)、子传父的小问题

最新推荐文章于 2025-01-15 08:30:01 发布

0rigami

最新推荐文章于 2025-01-15 08:30:01 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/m0_53708566/article/details/117919048

本文介绍了Vue中父子组件通信的自定义事件方式，详细阐述了如何通过$emit触发事件以及在父组件中通过v-on监听。同时，针对子组件修改props数据引发的警告问题，提出了使用data或computed的解决方案，并展示了如何在修改子组件数据的同时更新父组件状态的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子传父(自定义事件)

有时候我们需要子组件传递给父组件一些信息，这个时候需要使用自定义事件来完成。

自定义事件流程：

在子组件中，通过 $emit() 来触发事件
在父组件中，通过 v-on 来监听子组件事件（v-on 不仅能监听 DOM 事件，还可以监听自定义事件）

<!-- 父组件模板 -->
<div id="app">
	<!-- 监听子组件的事件	-->
	<cpn @item-click="cpnClick"></cpn>
</div>

<!-- 子组件模板  -->
<template id="cpn">
	<div>
		<button v-for="item in categories" @click="btnClick(item)">{
  
  {item.name}}</button>
	</div>
</template>

<script src="../js/vue.js"></script>
<script>
	const cpn = {
     
     
		template: `#cpn`,
		data() {
     
     
			return {
     
     
				categories: [
					{
     
     id: 'aaa', name: '热门推荐'},
					{
     
     id: 'bbb', name: '手机数码'},
					{
     
     id: 'ccc', name: '家用电器'},
					{
     
     id: 'ddd', name: