Vue : 인스턴스 범위 외부의 함수에서 Vue 인스턴스에 액세스

Question

이것은 내 데이터 객체의 작은 부분입니다. 기본적으로 탐색 메뉴를 만드는 데 사용됩니다. 탐색 메뉴에는 함수를 트리거해야하는 특정 버튼이 있습니다. 데이터 객체 내부에서 함수를 만드는 것이 가장 명확한 방법이기 때문에 데이터 객체 내부에 함수를 만들 것이라고 생각했습니다.

그러나 this은 vue 객체를 반환하지 않습니다. 따라서 전역 영역의 VM 부분을 만드는 것과 별개로이 작업을 수행하는 방법에 대한 손실이 있습니다.

아이디어가 있으십니까?

const data = { 
    login: { 
    title: "Log in", 
    icon: "fa fa-sign-in", 
    action: function() { 
     console.log("Log in"); 
     // This is where I want to access the vm, e.g. like this: 
     // this.$root.showLoginBox(); 
    } 
    } 
} 

Answer 1

Vue 인스턴스가 해당 인스턴스 범위 외부에서 사용할 함수를 정의하는 것은 좋지 않은 것처럼 보입니다. 당신이 정말로 그것이 어디 data 개체를 유지해야하는 경우에는 뷰 인스턴스 내에서 함수에 this를 결합 할 수

하지만, : 당신의 VUE 인스턴스 내에서

const data = { 
    login: { 
    action: function() { 
     console.log(this) 
    } 
    } 
} 

new Vue({ 
    created() { 
    data.login.action.bind(this)(); 
    } 
}) 

Here's a working codepen.