vue中父子组件传值Prop&$emit

一、组件之间的传值方式有哪些？
①父组件传值给子组件，子组件使用props进行接收
②子组件传值给父组件，子组件使用 $emit+事件对父组件进行传值③使用$$attrs和$children获取到父组件实例和子组件实例，进而获取数据
④使用attrs和$listeners,在对一些组件进行二次封装时可以方便传值，例如A->B->C
⑤使用refs获取组件实例，进而获取数据
⑥使用vuex进行状态管理
⑦使用eventBus进行跨组件触发事件，进而传递数据
⑧使用provide和inject，官方建议不要使用这个
⑨使用浏览器本地缓存，例如localstorage
二、详细讲解vue中父子组件传值
1、父组件向子组件传值

//父组件.vue
<template>
	<div>
		<Child name="张三" sex="女" :age="18" />
	</div>
</template>
<script>
	import Child from './components/Child'
	export default{
		name:"Parent",
		conponents:{Child}
	}
</script>

//子组件.vue
<template>
	<div>
		<h2>姓名:{{name}}</h2>
		<h2>性别:{{sex]}</h2>
		<h2>年龄:{{age}}</h2>
	</div>
</template>
<script>
	export default{
		name:"Child",
		//简单的声明接收
		//props:['name','age','sex']
		
		//接收的同时对数据进行类型限制
		/*props:{
			name:String,
			age:Number,
			sex:String
		}*/
		//接收的同时对数据进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String,//name的类型是字符串
				required:true,//name是必要的
			},
			age:{
				type:Number,
				default:99,//默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>

2、子组件像父组件传值通过$emit

//父组件.vue
<template>
	<div>{{childData}}</div>
	<router-view @pushData="getChildData"></router-view>
</template>
<script>
	export default{
		data(){
			return{
				ChildData:"",//定义获取子组件的数据
			}
		},
		methods:{
			getChildData(data){
				this.ChildData=data//想要获取子组件的数据，并赋值给自己的childData
			}
		}
	}
</script>

//子组件.vue
<template>
	<div @click="sendData">点我将数据传递给父组件</div>
</template>
<script>
	export default{
		data(){
			return {
				data:"我是来自子组件的数据"
			}
		},
		medthods:{
			sendData(){
				this.$emit('pushData',this.data)
			}
		}
	}
</script>