vue 서브어셈블리methods에서props의 값을 가져옵니다

최근에 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
부족한 점이 있으면, 아낌없이 가르침을 주시기 바랍니다.

좋은 웹페이지 즐겨찾기