vue与组件的通讯（props与$emit）

1、父页面给组件传递数据(props)
父页面

<template>
	<view>
		<a-chlid :titleData="titleData"></a-chlid>
	</view>
</template>
<script>
	//组件的引入这边就不多描述了
	export default{
		data(){
			return{
				titleData:'标题'
			}
		}
	}
</script>

组件

<template>
	<view>
		{{titleData}}
	</view>
</template>
<script>
	//组件的引入这边就不多描述了
	export default{
		name:'a-chlid',
		props:{
			titleData:{
				type:String,//传入参数的类型
				default: null //默认值
			}
		}
	}
</script>

2、组件传递数据给父页面($emit)
组件

<template>
	<view @click="btn">
		点我
	</view>
</template>
<script>
	//组件的引入这边就不多描述了
	export default{
		name:'a-chlid',
		methods:{
			btn(){//不一定是点击事件，也有可能是执行了一个请求，然后把请求到的数据发送
				let data={
					name:'lin'
				}
				this.$emit('userName', data);//this.$emit必须，userName可自定义
			}
		}
	}
</script>

父页面

<template>
	<view>
		<a-chlid @userName="userName"></a-chlid>
	</view>
</template>
<script>
	//组件的引入这边就不多描述了
	export default{
		methods:{
			//组件发送时，会触发页面的@userName事件，并且e接收数据
			userName(e){
				console.log(e)//name:'lin'
				console.log(e.name)//lin
			}
		}
	}
</script>