>  기사  >  웹 프론트엔드  >  vuejs에서 이것은 무엇을 의미합니까?

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

青灯夜游
青灯夜游원래의
2021-10-26 15:38:5911446검색

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

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

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

Vuejs

1 vue 구성 요소의 이 변수 ​​

Vue hook 메서드의 모든 수명 주기(예: beforeCreate , 생성됨, beforeMount, 마운트됨, beforeUpdate, 업데이트됨, this는 beforeDestroy 및 destroyed에서 사용됩니다. this는 이를 호출하는 Vue 인스턴스를 참조합니다. 즉, (new Vue) Vue所有的生命周期钩子方法(如beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroy以及destroyed)里使用thisthis指代调用它的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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.