Vue.js
Vue에서 "this"사용하기
수색…
소개
우리에 유래에 뷰 코드에서 볼 수있는 가장 일반적인 오류 중 하나는의 오용 this
. 가장 일반적인 실수하여, 두 영역에서 일반적으로 하강 this
등의 방법, 계산 속성을 정의하기 위해 약속이나 비동기 콜백 함수에서 화살표 함수를 사용하여
잘못된! Vue 메서드 내에서 콜백에 "this"를 사용합니다.
new Vue({
el:"#app",
data:{
foo: "bar"
},
methods:{
doSomethingAsynchronous(){
setTimeout(function(){
// This is wrong! Inside this function,
// "this" refers to the window object.
this.foo = "baz";
}, 1000);
}
}
})
잘못된! 약속 안에서 "이"를 사용하십시오.
new Vue({
el:"#star-wars-people",
data:{
people: null
},
mounted: function(){
$.getJSON("http://swapi.co/api/people/", function(data){
// Again, this is wrong! "this", here, refers to the window.
this.people = data.results;
})
}
})
권리! 클로저를 사용하여 "this"를 캡처하십시오.
클로저를 사용하여 this
올바르게 캡쳐 할 수 있습니다.
new Vue({
el:"#star-wars-people",
data:{
people: null
},
mounted: function(){
// Before executing the web service call, save this to a local variable
var self = this;
$.getJSON("http://swapi.co/api/people/", function(data){
// Inside this call back, because of the closure, self will
// be accessible and refers to the Vue object.
self.people = data.results;
})
}
})
권리! 바인드를 사용하십시오.
콜백 함수를 바인드 할 수 있습니다.
new Vue({
el:"#star-wars-people",
data:{
people: null
},
mounted:function(){
$.getJSON("http://swapi.co/api/people/", function(data){
this.people = data.results;
}.bind(this));
}
})
권리! 화살표 기능을 사용하십시오.
new Vue({
el:"#star-wars-people",
data:{
people: null
},
mounted: function(){
$.getJSON("http://swapi.co/api/people/", data => this.people = data.results);
}
})
주의! Arrow 함수는 Ecmascript 2015에 도입 된 구문입니다. 아직 지원되지 않지만 모든 최신 브라우저 가 지원하는 브라우저를 타겟팅하는 경우에만 사용하거나 babel 과 같은 것을 사용하여 ES5 구문으로 javascript를 컴파일하는 경우에만 사용하십시오 .
잘못된! 화살표 함수를 사용하여 "this"를 참조하는 메서드를 정의합니다.
new Vue({
el:"#app",
data:{
foo: "bar"
},
methods:{
// This is wrong! Arrow functions capture "this" lexically
// and "this" will refer to the window.
doSomething: () => this.foo = "baz"
}
})
권리! 일반적인 함수 구문을 사용하여 메서드를 정의하십시오.
new Vue({
el:"#app",
data:{
foo: "bar"
},
methods:{
doSomething: function(){
this.foo = "baz"
}
}
})
또는 자바 스크립트 컴파일러 또는 Ecmascript 2015를 지원하는 브라우저를 사용하는 경우
new Vue({
el:"#app",
data:{
foo: "bar"
},
methods:{
doSomething(){
this.foo = "baz"
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow