Prop 값으로 데이터 속성을 초기화하는 방법

Prop 값으로 데이터 속성을 초기화하는 방법

VueJs는 아직 조금 어리지만 나는 모든 것이 좋다.하지만 지금은 어딘가에 고정돼 있어
에서 몇 가지 값을 초기화하고 싶다.data()전달된 값 사용props컴포넌트 내에서 소품을 변형시키는 것은 권장되지 않기 때문에 나중에 변형시킬 수 있도록 하기 위해서입니다.실제로 공식 문서에서는 다음과 같이 프로펠러 값을 사용하여 이 속성을 초기화할 것을 권장합니다.

{
props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

아래와 같은 것이 있습니다.

<template>
<div class="well">
    <!-- Use Prop value directly on the template: works (but of no help in initializing data) -->
    Department: {{department.name}}
    <!-- Use prop value but gotten via computed property: Works inside the template but not in the initialization -->
    Department: {{fetchDepartment.name}}
    <!-- Use the array I initialized with the prop value: Does not work -->
    Department: {{this_department.name}}
</div>
</template>

<script>
    export default {
        name: 'test',
        props: ['department'],
        data() {
            return {
                this_department: this.department
                // below does not work either
                //this_department: this.fetchDepartment
            }
        },
        created() {
            // shows empty array
            console.log(this.department)
        },
        mounted() {
            // shows empty array
            console.log(this.department)
        },
        computed: {
            fetchDepartment() {
                return this.department
            }
        }
    }
</script>

상기의 코멘트섹션에서 알 수 있듯이 초기화는 성공하지 못했습니다.의 가치 또한this.department어느쪽인가에서 나타나다created()또는mounted()후크입니다. 주의: Chrome Vue Devtools를 사용하여 정의되어 있는 것을 알 수 있습니다.그래서 제 질문은 어떻게 정확하게 초기화할 것인가 하는 것입니다.data()속성, 사용props또는 이 문제를 회피하는 가장 좋은 방법은 무엇입니까?

제 답변이 늦게 오는 건 알지만 그게 도움이 되고 다른 사람이 여기 오길 바래요.소품 데이터가 비동기일 경우:

// in the parent component
<template>
    <child :foo="bar" v-if="bar" />
</template>

이렇게 하면 이미 소품을 사용할 수 있는 경우 구성요소를 렌더링할 수 있으므로 가이드의 권장 방법에 따라 다음과 같이 소품으로 데이터 값을 초기화할 수 있습니다.

props: ['initialCounter'],
data: function () {
    return {
       counter: this.initialCounter
    }
}

해피 코딩!

계산된 속성은 프롭의 가변 버전을 제공하는 가장 간단한 방법이지만 프롭이 업데이트될 때 데이터가 손실되지 않도록 할 수 있습니다.명시적 시계를 사용할 수 있습니다.

감시자

대부분의 경우 계산된 속성이 더 적합하지만 사용자 정의 워처가 필요할 수 있습니다.따라서 Vue는 워치 옵션을 통해 데이터 변경에 대한 보다 일반적인 대응 방법을 제공합니다.이 기능은 데이터 변경에 대응하여 비동기식 또는 고비용 작업을 수행할 때 가장 유용합니다.

이 기능은 데이터 변경에 대응하여 비동기식 또는 고비용 작업을 수행할 때 가장 유용합니다.

소품을 수정할 수 있습니다..sync' 수식어를 사용합니다.편리하고 직관적이기 때문에 자주 사용하고 있습니다.이를 위해서는 부모에서 값을 업데이트하기 위한 이벤트를 내보내야 합니다.유지 보수 문제로 이어지는 경고에 대해서는 잘 모르겠습니다.

값을 수정하고 부모를 업데이트하지 않을 때 사용하는 또 다른 방법은 Lodash 클론을 사용하는 것입니다.예를 들어 (장착된 상태에서 사용 가능한 것으로 가정)

mounted(){
    this_department = _.clone(this.department)
}

지속적으로 프로펠을 변환하고 상위 프로펠러를 변경하려면 계산된 속성을 사용합니다.그러나 대부분의 경우 컴포넌트 내의 데이터 상태에 의존하여 다른 함수를 사용하여 변경할 필요가 있기 때문에 계산된 속성은 필요한 것이 아닙니다.

언급URL : https://stackoverflow.com/questions/45943682/how-to-initialize-data-properties-with-prop-values