uni-app组件之间的通讯

父组件传递数据给子组件

//父组件
<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
   )}
}

版权声明:本文为webblock原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。