vue 가 자세 한 페이지 를 돌 릴 때 created 방법 으로 데 이 터 를 업데이트 하지 않 습 니 다.

여러분 은 프로젝트 를 할 때 특정한 매개 변 수 를 가지 고 상세 한 페이지 로 이동 한 다음 에 이 매개 변 수 를 찾 을 것 입 니 다.다음은 중점 입 니 다.
처음에 저 는 쿠키 로 이 파 라 메 터 를 저장 해서 상세 페이지 에서 이 파 라 메 터 를 찾 았 는데 처음 찾 은 것 만 정확 한 것 을 발 견 했 습 니 다.아버지 페이지 로 돌아 가 상세 페이지 에 들 어가 면 얻 은 데 이 터 는 원래 의 것 과 똑 같 아서 변 하지 않 았 습 니 다.(router 가 뛰 어 넘 을 때 페이지 를 새로 고치 지 않 기 때문에 제 가 얻 은 값 은 영원히 업데이트 되 지 않 습 니 다)쿠키 에 문제 가 있 는 줄 알 고 query 가 가지 고 있 는 매개 변 수 를 사용 하여 뛰 었 습 니 다.sessionStorage 방법 으로 액세스 할 수 없 었 습 니 다.
다음 해결 방법 을 보 세 요.


나 도 그 중의 어떤 원리 인지 모 르 겠 지만 문 제 를 해 결 했 고 문 서 를 보 았 지만 이 두 가지 방법의 구체 적 인 차 이 를 이해 하지 못 했다.
보충 지식:vue 중성자 구성 요소 의 created,mounted 갈고리 에서 props 의 값 문 제 를 얻 을 수 없습니다.
부자 모듈 통신
이 홈 페이지 는 분명 하고 간단 합 니 다.부모 구성 요소 에 서 는 v-bind 바 인 딩 전송 을 사용 하고 하위 구성 요 소 는 props 로 받 으 면 됩 니 다.
예 를 들 면:
부모 구성 요소 중

<template>
  <div>
    <head-top></head-top>
    <section class="data_section">
      <header class="chart-title">    </header>
      <el-row :gutter="20" class="chart-head">
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head blue-head">  ：</div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">     <span>{{number}}</span></div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">     <span>{{amount}}</span></div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">     <span>{{profits}}</span></div></el-col>
      </el-row>
    </section>
    <chart :chartData="chartData"></chart>
  </div>
</template>

<script>
  data(){
      return {
        number: null,
        amount: null,
        profits: null,
        chartData: [10,10,10]
      }
    },
</script>

하위 구성 요소 중

export default {
  props: ['chartData']
}

이 경우 하위 구성 요소 의 methods 에서 props 의 값 을 가 져 오 려 면 this.chart Data 를 직접 사용 하면 됩 니 다.
그러나 쓰기 상황 에서 chartData 의 값 은 고정 적 인 것 이 아니 라 동적 으로 가 져 온 것 입 니 다.이 경우 methods 에서 chartData 를 가 져 올 수 없 거나 기본 값 을 가 져 올 수 있 습 니 다.
예 를 들 면 아래 의 이 상황.
부모 구성 요소 중

<script>
  data(){
      return {
        number: null,
        amount: null,
        profits: null,
        chartData: []
      }
    },
    mounted(){
      this.getStatistics();
    },
    methods: {
      //      
      getStatistics(){
        console.log('      ')
        axios.post(api,{

        }).then((res) => {
          this.number = res.data.domain.list[0].number;
          this.amount = res.data.domain.list[0].amount;
          this.profits = res.data.domain.list[0].profits;
          this.chartData = [this.number,this.amount,this.profits];
        }).catch((err) => {
          console.log(err);
        })
      },
    },
</script>

이 때 하위 구성 요소 의 methods 에서 this.chart Data 를 사용 하면 존재 하지 않 습 니 다(비어 있 기 때 문 입 니 다)
이 상황 은 워 치 로 처리 하 겠 습 니 다.
해결 방법 은 다음 과 같다.
watch 사용 하기

props: ['chartData'],
    data(){
      return {
        cData: []
      }
    },
    watch: {
      chartData: function(newVal,oldVal){
        this.cData = newVal; //newVal  chartData
        this.drawChart();
      }
    },

chart Data 의 값 을 감청 합 니 다.비어 있 을 때 트리거 됩 니 다.이 럴 때 가 져 올 수 있 습 니 다.값 을 받 은 후에 해 야 할 처리 방법 도 watch 에서 실행 해 야 합 니 다!
위 에서 vue 를 해결 하고 상세 한 페이지 를 넘 길 때 created 방법 으로 데 이 터 를 업데이트 하지 않 습 니 다.문 제 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.