uniapp/vue 组件之间的传值

父组件向子组件传值

1.父组件（传递）

<template>
	<div>
		<child :title="title"></child>
	</div>
</template>

<script>
export default{
	data(){
		return {
			title:"hello child!"
		}
	}
}
</script>

2.子组件（接受）

<template>
	<div>
		<p>父组件传递过来的值为：</p>
		<p>{{title}}</p>
	</div>
</template>

<script>
export default{
	props:['title'],
	data(){
		return {
			//也可以保存在本地数据中
			msg:this.title
		}
	}
}
</script>

子组件给父组件传值

子组件（传递）

<template>
	<div>
		<button @click="sendNum">给父组件传值</button>
	</div>
</template>

<script>
export default{
	data(){
		return {
			num:520
		}
	},
	methods:{
		sendNum(){
			this.$emit('getNum',this.num);
		}
	}
}
</script>

父组件（接受）

<template>
	<div>
		<child @getNum="getNum"></child>
	</div>
</template>

<script>
export default{
	data(){
		return {
			
		}
	},
	methods:{
		getNum(value){
			console.log(value);
		}
	}
}
</script>

兄弟组件传值

a 组件

<template>
	<div>
		<button @click="addNum">修改b组件的数据</button >
	</div>
</template>

<script>
export default{
	data(){
		return {
			
		}
	},
	methods:{
		addNum(){
			uni.$emit("updateNum",10);
		}
	}
}
</script>

b 组件

<template>
	<div>
		这是b组件的数据{{num}}
	</div>
</template>

<script>
export default{
	data(){
		return {
			num:0
		}
	},
	create(){
		uni.$on("updateNum",value=>{
			this.num+=value;
		})
	}
	
}
</script>

父组件

<template>
	<div>
		<child-a></child-a>
		<child-b></child-b>
	</div>
</template>

<script>
export default{
	data(){
		return {
			
		}
	}
}
</script>