uni-app组件之间的通讯

最新推荐文章于 2025-10-24 09:36:45 发布

原创最新推荐文章于 2025-10-24 09:36:45 发布 · 893 阅读

2 ·

CC 4.0 BY-SA版权

本文深入讲解了父组件向子组件、子组件向父组件及兄弟组件间的多种数据传递方式，包括属性绑定、事件监听和全局事件总线的应用，是理解和实践组件通信不可或缺的指南。

父组件传递数据给子组件

//父组件
<test :title='title'>子组件</test>
data(){
  title:'Hello'
}
子组件
{{title}}
export default{
	props:['title']
}

子组件传递数据给父组件

//子组件
<button @click="sendNum">点击</button>
data(){
   return{
   num:3
   }
}
methods:{
  sendNum(){
  this.$emit('myEven',this.num)}
}

//父组件
<test @myEven="getNum"></test>
这是子组件的传递过来的{{num}}
data(){
  return{
  num:0
  }
}
methods:{
	getNum(num){
	this.num=num;
	}
}

兄弟组件之间传递数据

//a组件要改变b组件的数据
//b组件
这是b组件的数据{{num}}
data() {
			return {
				num:0
			};
		},
create(){
	uni.$on('updateNum',num=>{
	this.num+=num
	})
}
//a组件
<button @click="addNum">点击<button>
//点击按钮改变b组件的数据

methods:{
   addNum(){
   uni.$emit('updateNum',10
   )}
}