最近用vue练习项目，想在子组件中使用props中的值，但是在mounted中没有办法拿，最后终于搞明白了

这里我简单说一下父组件给子组件传值的两种情况(静态跟动态的数据)。

父组件中：

	<template>
	    <div class="order">
	    	<!-- 子组件  父组件通过属性传值  属性用-链接，值用驼峰命名--> 
			<order-header :order-data="orderData" :order-data1="orderData1"></order-header>
		</div>
	</template>
	<script>
	export default{
		data(){
			return {
				orderData:[],    //这里的数据是动态的， (可以是从后端获取的数据)
				orderData1:[1,2,3]  //这里为静态值直接传给子组件，并且不发生变化
			}
		},
		mounted(){
			this.getOrder();
		},
		methods:{
			//获取数据
			getOrder(){
				axios.post(api,{
				
				}).then((res)=>{
					console.log(res);
					//将请求的数据放在orderData中    //这里的res.data.pageData是数组
					this.orderData =  res.data.pageData
				}).catch((err)=>{
					console.log(err);
				})
			}
		}
	}
	</script>

分析
父组件传递给子组件传递两个值，orderData1传递静态不变的值，orderData传递动态的值

子组件：

 export default{
		props:['orderData','orderData1']
}

分析
子组件中接收用props，在template中可以直接使用{{orderData}}
子组件的methods中想要取到props中的值，
直接使用this.orderData1，但这种情况只能获取静态的值，所以只能获取orderData1，而orderData的值是动态的，如果用this.**获取到的是空或者是默认值

解决方法使用watch

	//	这里单独解释orderData(动态)
	props:['orderData'],
	data(){
		return {
			newOrderData:[]
		}
	 },
	 methods:{
	 	order(){
				console.log(this.newOrderData)     
			}
	 },
	watch:{
			orderData:function(newData,oldData){
				console.log(newData)  //newData就是orderData
				this.newOrderData = newData;     
				//	methods的函数在这里调用可以获取到newOrderData的值	      
				this.order();
			}
		}

注：监听的值，如果有空转变时就触发，拿到值之后的处理方法也要在watch中运行

结论

props接收静态数据用this.**
动态数据用watch

如有不足之处，还望不吝赐教