Vue组件使用（父组件监听子组件数据变化，子组件使用父组件的数据，并监听父组件的数据变化）

🌟“场快订” 场馆预定平台是我个人匠心打造的全栈免费开源项目，使用 Spring Cloud + Uniapp 开发，包含高并发设计（缓存击穿、缓存穿透处理）、大数据量查询优化、分库分表、IP 流量管控、分布式事务、分布式 ID、幂等处理、WebSocket 双向通信、消息队列异步执行、延时队列等内容，此外还包括域名购买与解析、项目打包上线、HTTP升级HTTPS等手把手教程，项目代码简洁，部分代码使用设计模式重构，非常适用于学习后端技术、毕业设计、相关计算机竞赛，感兴趣的朋友可以从以下链接进行学习：

• 📦 源码仓库：gitee.com/HelloDam/ve…
• 📚 技术专栏：blog.csdn.net/laodanqiu/c…
• 📱 在线体验：hellodam.website（建议手机访问）

🎯导读：本文档概述了Vue.js中父子组件间的数据交互方法。主要包括：父组件如何向子组件传递数据，子组件如何正确接收及使用这些数据而不直接修改它们；子组件如何通过watch监听父组件传递的数据变化并在数据变动时执行相应逻辑；以及父组件如何监听子组件的状态变化，通过子组件触发的自定义事件获取信息。文档提供了代码示例和注意事项。

子组件使用父组件数据

父组件

父组件声明变量

父组件向子组件传递数据

子组件

【接收数据】 子组件接收参数的名字一定要和父组件的属性名字一样，例如我这里是isExpand

props:{
	参数名:{
		type: 接收参数类型
	}
},

Vue 数据类型 type 有以下几种：

• String：字符串类型。例如：“hello world”。
• Number：数字类型。例如：12，1.5。
• Boolean：布尔类型。例如：true，false。
• Object：对象类型。例如：{name: 'Tom', age: 20}。
• Array：数组类型。例如：[1, 2, 3]。
• Function：函数类型。例如：function() { console.log('hello') }。
• Date：日期类型。例如：new Date()。
• Symbol：符号类型。例如：Symbol('foo')。
• null：空类型。表示该值为 null。
• undefined：未定义类型。表示该值未定义。
• any：任意类型。表示可以是任何类型的值。

【使用】

子组件要使用父组件传过来的数据，直接this.参数名即可

【注意】

子组件不要修改父组件传过来的数据，不然会报错。如果想要修改，可以将其赋值到子组件的变量中，例如父组件的参数叫num，可以将次参数的值赋值给子组件的num1，后续就操作子组件的num1即可

子组件监听父组件的数据变化

子组件

子组件想要实时监听父组件的数据变化的话，需要写一个watch，格式如下：

• immediate：设置true会让观察器函数在组件被创建并挂载到DOM之后立即执行一次，无论监听的数据属性当前是否发生了变化。这意味着即使新旧值相同，也会触发一次handler函数。设置false：这表示监听器函数会在监听的数据属性首次发生变化时才执行。（不设置默认为false）
• deep：当你监听的对象或数组内部发生变化时，普通的watch观察器不会捕获这些变化。为了能够监听到这些深层的变化，你需要设置为true，同时也会增加性能开销。（不设置默认为false）

watch:{
	要监听的参数名1:{
		handler(newValue,oldValue){
			这里可以执行你想要执行的方法
		},
		immediate: false/true,
		deep: false/true
	}，
	要监听的参数名2:{
		handler(newValue,oldValue){
			这里可以执行你想要执行的方法
		}
	}
}

vue3之后，需要将watch放到这个位置，不然会爆红

  /**
   * 监听父组件的数据变化
   */
  watch: {
    backupSourceId: {
      handler(newValue, oldValue) {
        this.listBackupTarget(false);
      },
    }
  },

父组件监听子组件的数据变化

子组件

子组件变量声明

子组件数据改变的时候，需要使用this.$emit('事件名城'[,参数1,参数2])通知父组件

父组件

在父组件中，你可以使用v-on指令（或简写形式@）来监听子组件触发的事件，并定义一个处理函数来接收这些参数。

父组件的方法可以声明参数来接收子组件传过来的数据