Was bedeutet das in vuejs

Die Bedeutung davon in Vuejs: 1. In einer Vue-Komponente oder -Instanz stellt dies die Vue-Instanz dar, die sie aufruft; 2. In einer Callback-Funktion stellt dies die übergeordnete Komponente dar; Ort, wenn es definiert ist. Das Objekt ist das Hostobjekt.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

diese Variable in Vuejs

1 Vue-Komponente

in allen Lebenszyklen von Vue Hook-Methoden (z. B. beforeCreate). , erstellt, beforeMount, montiert, beforeUpdate, aktualisiert, this wird in beforeDestroy und destroyed verwendet), this bezieht sich auf die Vue-Instanz, die es aufruft, das heißt (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 Komponente oder Instanz, unabhängig davon, ob es sich um die Lebenszyklus-Hook-Funktion created oder die benutzerdefinierte Funktion plus, <code>dies bezieht sich alle auf die aktuelle vue-Instanz

2 Rückruffunktion🎜🎜🎜rrreee🎜Zu diesem Zeitpunkt ist die Rückruffunktion function(results , status) verweist this erneut auf anonymes Objekt (analog zu Java Anonymous Class), Daher bezieht sich this auf die übergeordnete Komponente. Beim Ausführen von <code>this.buscarLojas wird ein Fehler gemeldet, dass die Funktion nicht gefunden werden kann
🎜🎜🎜🎜3 Pfeilfunktion🎜🎜🎜 🎜Pfeilfunktion Es gibt kein eigenes this, sein this wird geerbt; der default zeigt auf das Objekt in dem es definiert ist (host object), anstelle des execution-time object🎜rrreee🎜arrow function ist an den gebunden übergeordneten Kontext, sodass this auf die übergeordnete Komponente verweist. Um das Problem im dritten Fall zu lösen, ändern Sie die Funktion in der Rückruffunktion in eine Pfeilfunktion und ändern Sie dies von „anonym“. Das Objekt leitet zur externen vue-Komponente weiter🎜🎜Verwandte Empfehlungen: „🎜vue.js Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonWas bedeutet das in vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!