Avoid mutating a prop directly since the value will be overwritten whenever the parent comp

在这里插入图片描述

最近用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();
		}
	}