vuejs에서 이것은 무엇을 의미합니까?

vuejs에서 이 의미는 다음과 같습니다. 1. vue 구성 요소 또는 인스턴스에서 이는 이를 호출하는 Vue 인스턴스를 나타냅니다. 2. 콜백 함수에서 이는 상위 구성 요소를 나타냅니다. 정의된 위치 개체는 호스트 개체입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vuejs

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从匿名对象重新指向外部的vuerrreee

vue 구성 요소 또는 인스턴스입니다. 수명 주기 후크 함수 생성이든 사용자 정의 함수 plus, 그 중 <code>이는 모두 현재 vue 인스턴스

2 콜백 함수🎜🎜🎜rrreee🎜를 참조합니다. 이때 콜백 함수는 function(results , status)는 this를 익명 객체(java 익명 클래스와 유사)로 다시 지정합니다. 따라서 this는 상위 구성 요소를 참조합니다. this.buscarLojas를 실행하면 함수를 찾을 수 없다는 오류가 보고됩니다.
🎜🎜🎜🎜3 화살표 함수🎜🎜🎜 🎜화살표 함수 자체 this가 없으며 this가 상속되어 개체를 가리킵니다. 실행 시간 객체🎜rrreee🎜화살표 함수 대신 정의된(호스트 객체)가 에 바인딩됩니다. 상위 컨텍스트이므로 this는 상위 구성 요소를 가리키게 됩니다. 세 번째 경우의 문제를 해결하려면 콜백 함수의 함수를 화살표 함수로 변경하세요. 그리고 익명에서 this를 변경하세요. 객체는 외부 vue 구성 요소🎜🎜로 리디렉션됩니다. 관련 권장 사항: "🎜vue.js tutorial🎜"🎜

위 내용은 vuejs에서 이것은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!