vue组件之间传值

   vue组件之间传值有多种方法，可以使用store缓存之间进行传值,也可使用vue中props方法进行之间传值 ,
   下面我就说一下我在工作中使用比较多得传值方式

1.使用props属性进行传值

   //父组件A；value是父组件传给子组件得值，childMethod是一个方法，可用来子组件操作一个方法，返回给父组件一个值，子组件调用父组件的方法也可使用$on(),$emit(),方法来调用,
   <template>
		<div class="child">
			<childB :value="value" :childMethod="getChildValue"></childB>
			<div class="childBValue">{{childBValue}}</div>
		</div>
   </template>
   <script>
   		import childB from './childB'
   		export default{
			data(){
				return {
					value:"我是父组件之间传得值",
					childBValue:""
				}
			},
			components:{
				childB
			},
			methods:{
				getChildValue(value){
					this.childBValue=value;
				}
			}
		}
   </script>

	//子组件
	<template>
		<div class="childB">{{value}}</div>
		//点击方法返回父组件一个值
		<div @click="backFatherValue">返回父组件一个值</div>
	</template>
	<script>
		export default{
			props:{
				value:{
					type:String,
					default:""
				},
				childMethod:{
					type:Function,
					default:()=>{
						return ""
					}
				}
			},
			methods:{
				backFatherValue(){
					this.childMethod("这是子组件返回给父组件得值");
					//也可使用$emit()方法直接调用父组件的方法，返回数值
					//this.$emit("getChildValue","这是子组件返回给父组件得值")
				}
			}
		}
	</script>

provide/inject 也可使用这个属性进行父子组件之间的传值，props传值有个局限性，父组件的值传值给孙子组件时，所传的值必须在子组件之间在props一下才可以,

	//父组件A,子组件B,孙子组件C
	<template>
		<div class="child">
			<childB :value="value" :childMethod="getChildValue"></childB>
			<div class="childBValue">{{childBValue}}</div>
		</div>
   </template>
   <script>
   		import childB from './childB'
   		export default{
			data(){
				return {
					value:"我是父组件之间传得值",
					childBValue:""
				}
			},
			provide(){
				return {
					value:"我是父组件之间传得值"，
					onTrigger:this.getChildValue(value);
					
				}
			},
			components:{
				childB
			},
			methods:{
				getChildValue(value){
					this.childBValue=value;
				}
			}
		}
   </script>
   //子组件B
	<template>
		<childC></childC>
	</template>
	<script>
		import childC from './C'
		export default{
			components:{
				childC
			}
		}
	</script>
	 //孙子组件C
	<template>
		<div class="childC">{{value}}</div>
		//点击方法返回祖组件一个值
		<div  @click="backFatherValue">返回祖父组件一个值</div>
	</template>
	<script>
		export default{
			inject:["value","onTrigger"]，
			methods:{
				backFatherValue(){
					this.onTrigger("这是孙子组件返回的一个值")
				}
			}
		}
	</script>