Programing

VueJS 라이프사이클에서 소품 업데이트 시기

c10106 2022. 4. 19. 20:47
반응형

VueJS 라이프사이클에서 소품 업데이트 시기

나는 부에즈 라이프사이클의 탑재된 후크에 있는 소품들에 접근하려고 하지만 그것은 아무런 가치가 없는 것 같다.

내(실제로 단순화된) 구성 요소는 다음과 같다.

export default {
    props: [
        'columns',
    ],
    mounted: function() {
        console.log(this.columns)
    }
}

부모는 다음과 같이 보인다.

<script>
    import DatatableHeader from './DatatableHeader.vue';

    export default {
        data: {
            columns: [{'heading': 'Column 1'}, {'heading': 'Column 2'}]
        },
        components: {
            'datatableheader'   : DatatableHeader,
        }
    }
</script>

구성 요소가 올바르게 렌더링되지만 마운트된 함수의 출력은 빈 배열로, 타이밍 문제로 보인다.

내가 뭘 잘못하고 있나요?아니면 내가 사용해야 할 다른 라이프사이클 훅이 있는가?

고마워!

단답은 탑재된 훅에 있는 소품들에 접근할 수 있다는 것이다.이 fiddle을 선택하면 알림에 열의 제목이 표시되는 것을 볼 수 있다.https://jsfiddle.net/yj3k1wLx/1/ 프로그램이 실행 중이지만 빈 배열을 반환한다는 사실은 실제로 열 배열을 전달하고 있지 않음을 나타내는 것 같다. <test :columns="columns">바이올린과 코드를 비교하여 잘못된 참조 또는 변수가 있는지 확인하십시오.

업데이트 주석에 대한 간단한 대답은 마운트된 루트 후크가 아닌 생성된 후크로 변경하는 것이다.하지만, 난 네가 이 일을 잘못된 방법으로 처리하고 있다는 느낌이 들어.네 코드를 못 봤지만 문제는 네가 어레이를 업데이트하는 데 있다고 생각해.여기에서 주의 사항을 읽고 https://vuejs.org/v2/guide/list.html#Caveats에서 업데이트된 데모를 확인하십시오. https://jsfiddle.net/yj3k1wLx/4/

참조URL: https://stackoverflow.com/questions/40634905/when-are-props-updated-in-the-vuejs-lifecycle

반응형