Vue.js에서 명명 된 인스턴스를 내보내려면 어떻게 사용합니까? var app = this

Question

vue-cli가 만든 웹팩 프로젝트에서 .vue 템플릿을 사용하고 있습니다.

나는 일반적으로 다음과 같이 파일을 내보낼 "수출 기본"을 사용 : 나는 인스턴스에 액세스하려고 할 때

는

export default { 
    data() { 
    return { 
     message:'' 
    }; 
}, 
... 

나중에 스크립트, 그것은 Axios의 같은 모든 기능 또는 제 3 자의 라이브러리에 보인다,

var app = this; 

    axios.post('https://test.com/api/getMessage',{}).then(res => { 
     app.message = res.data.message 
    }) 
    .catch(error => { 
     console.log(error) 
    }); 

: 예를 들어 ...

var app = this; 

그래서 난 데이터 속성에 액세스 할 수 있습니다 : 나는 상단에 이런 식으로 뭔가를 작성해야

하지만 var app = this를 호출합니다. 항상 정말 귀찮습니다.

내가 좋아 변수에 인스턴스를 넣어 선호 :

let app = { 
    data() { 
    return { 
     message:'' 
    }; 
}, 
methods :{ 
    getMessage:function(){ 

     axios.post('https://test.com/api/getMessage',{}).then(res => { 
      app.message = res.data.message 
     }) 
     .catch(error => { 
      console.log(error) 
     }); 
    } 
} 
} 

하지만 내보내거나 제대로 가져 오는 방법을 이해하지 않습니다. 모든 예제가 내보내기 기본값을 사용하는 것 같습니다. 그래서 내 질문을 재 작성, 내가 쓸 필요가 없습니다 수출하고 스크립트를 가져 더 나은/현명한 방법이 있습니다 :

var app = this; 

Answer 1

axios.post('https://test.com/api/getMessage',{}).then(res => { 
    this.message = res.data.message 
}) 

작업을해야 그 - 화살표의 기능 범위에서 개최되는 그들은 쓰여졌습니다. 즉, this은 거기에있는 Vue 인스턴스를 나타냅니다. 화살표 함수를 사용하지 않았다면 구체적으로 범위를 바인딩해야합니다 :

axios.post('https://test.com/api/getMessage',{}).then(function(res){ 
    this.message = res.data.message 
}.bind(this))