Vue 구성 요소 데이터 기능 - 이 비어 있음

Vue 구성 요소 데이터 기능 - 이 비어 있음

Vue.js 컴포넌트는 다음과 같이 정의되어 있습니다.

module.exports = Vue.component('folder-preview', {
    props: ['name', 'path', 'children', 'open'],
    template: `...
    `,
    methods: mapActions([
    ]),
    computed: mapState([
    ]),
    data: ()=> {
        console.log(this);
        return {
            collapsed: (this.open !== 'true')
        }
    }
});

기본적으로, 저는 계속collapsed컴포넌트의 로컬 데이터이지만 프로펠러에 전달된 값을 초기값으로 삼습니다.하지만, 그것은...this.open항상 정의되어 있지 않습니다.실제로 console.loggingthis빈 물체를 출력하는데 왜 그랬는지 모르겠어요

제가 뭘 잘못 알고 있는 건가요?

코드상의 문제가 미묘합니다.데이터를 화살표 함수로 선언했습니다.

이 질문에서 설명한 바와 같이 화살표 기능은this정의의 맥락에서 보면, 일반 함수가this콜의 컨텍스트로부터.만들기data화살표 기능은 컴포넌트 스코프가 올바르게 수신되지 않음을 의미합니다.

범위를 지정하지 않는 일반 함수로 선언된 경우this소등, 컴포넌트는 정상적으로 동작합니다.

Vue.component('sample', {
  props: ['open'],
  template: '<div>{{collapsed}}</div>',
  data() {
    return {
      collapsed: this.open !== 'true'
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <sample open="true"></sample>
</div>

언급URL : https://stackoverflow.com/questions/46230254/vue-component-data-function-the-is-empty