vuejs에서 이 의미는 다음과 같습니다. 1. vue 구성 요소 또는 인스턴스에서 이는 이를 호출하는 Vue 인스턴스를 나타냅니다. 2. 콜백 함수에서 이는 상위 구성 요소를 나타냅니다. 정의된 위치 개체는 호스트 개체입니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
1 vue 구성 요소의 이 변수
Vue
hook 메서드
의 모든 수명 주기(예: beforeCreate
, 생성됨
, beforeMount
, 마운트됨
, beforeUpdate
, 업데이트됨
, this
는 beforeDestroy 및 destroyed
에서 사용됩니다. this
는 이를 호출하는 Vue
인스턴스를 참조합니다. 즉, (new Vue
) Vue
所有的生命周期钩子方法
(如beforeCreate
,created
,beforeMount
,mounted
,beforeUpdate
, updated
,beforeDestroy
以及destroyed
)里使用this
,this
指代调用它的Vue
实例,即(new Vue
)
new Vue({ data: { a: 1 }, created: function () { console.log('a is: ' + this.a) } methods: { plus: function () { this.a++ } } });
vue
组件或者实例中,不管是生命周期钩子函数created
还是自定义函数plus
,他们中的this
都是指当前vue
实例
2 回调函数
methods: { searchLocations: function() { var address = this.search var geocoder = new window.google.maps.Geocoder() geocoder.geocode({ address: address }, function(results, status) { if (status === window.google.maps.GeocoderStatus.OK) { this.buscarLojas(results[0].geometry.location) } }) }, buscarLojas: function(center) { console.log(center) } }
此时回调函数function(results, status)
会重新将this
指向匿名对象
(类比java匿名类
),所以其中的this
指代父级组件,执行this.buscarLojas
会报错找不到函数
3 箭头函数
箭头函数
没有自己的this
,它的this
是继承而来;默认
指向在定义它时所处的对象(宿主对象
),而不是执行时的对象
methods: { searchLocations: function () { var address = this.search var geocoder = new window.google.maps.Geocoder() geocoder.geocode({address: address}, (results, status) => { if (status === window.google.maps.GeocoderStatus.OK) { this.buscarLojas(results[0].geometry.location) } else { alert(address + ' not found') } }) }, buscarLojas: function (center) { console.log(center) }, group1:()=>{ //ES6的箭头函数写法,箭头函数没有自己的this,它的this事继承来的,指向在定义它时所处的宿主对象,在这里this指向window。 this....... }, }
箭头函数
被绑定到父级上下文
,因此其中的this
会指向父级组件,针对情况三中的问题,将回调函数中的function
改成箭头函数,会将this
从匿名对象重新指向外部的vue
rrreee
vue
구성 요소 또는 인스턴스입니다. 수명 주기 후크 함수 생성
이든 사용자 정의 함수 plus, 그 중 <code>이
는 모두 현재 vue
인스턴스2 콜백 함수🎜🎜🎜rrreee🎜를 참조합니다. 이때 콜백 함수는 function(results , status)
는 this
를 익명 객체
(java 익명 클래스
와 유사)로 다시 지정합니다. 따라서 this
는 상위 구성 요소를 참조합니다. this.buscarLojas
를 실행하면 함수를 찾을 수 없다는 오류가 보고됩니다.화살표 함수
자체 this
가 없으며 this
가 상속되어 개체를 가리킵니다. 실행 시간 객체
🎜rrreee🎜화살표 함수
대신 정의된(호스트 객체
)가 에 바인딩됩니다. 상위 컨텍스트
이므로 this는 상위 구성 요소를 가리키게 됩니다. 세 번째 경우의 문제를 해결하려면 콜백 함수의 함수
를 화살표 함수로 변경하세요. 그리고 익명에서 this
를 변경하세요. 객체는 외부 vue
구성 요소🎜🎜로 리디렉션됩니다. 관련 권장 사항: "🎜vue.js tutorial🎜"🎜위 내용은 vuejs에서 이것은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!