vue 서브어셈블리methods에서props의 값을 가져옵니다
9653 단어 props 값 가져오기
여기에서 나는 부모 구성 요소가 서브 구성 요소에 값을 전달하는 두 가지 상황 (정적과 동적 데이터) 을 간단하게 말하겠다.
모 피쳐 어셈블리 내:
<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
부족한 점이 있으면, 아낌없이 가르침을 주시기 바랍니다.