Qu'est-ce que cela signifie dans vuejs

La signification de ceci dans vuejs : 1. Dans un composant ou une instance de vue, ceci représente l'instance de Vue qui l'appelle ; 2. Dans une fonction de rappel, cela représente le composant parent ; 3. Dans une fonction de flèche, cela représente le composant parent ; emplacement lorsqu'il est défini L'objet est l'objet hôte.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

cette variable dans Vuejs

1 composant vue

dans tous les cycles de vie de Vue méthodes de hook (telles que beforeCreate , créé, beforeMount, monté, beforeUpdate, mis à jour, this est utilisé dans beforeDestroy et destroyed), this fait référence à l'instance Vue qui l'appelle, c'est-à-dire (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 composant ou instance, qu'il s'agisse de la fonction hook de cycle de vie created ou de la fonction personnalisée plus, <code>ce parmi eux fait tous référence à l'instance vue actuelle

2 fonction de rappel🎜🎜🎜rrreee🎜À ce moment, la fonction de rappel function(results , status) redirigera this vers objet anonyme (analogue à classe anonyme Java), donc this fait référence au composant parent. L'exécution de this.buscarLojas signalera une erreur indiquant que la fonction est introuvable
🎜🎜🎜🎜3 Fonction flèche🎜🎜🎜 🎜Fonction flèche Il n'a pas son propre this, son this est hérité ; le default pointe vers l'objet ; dans lequel il est défini (objet hôte ), au lieu de l'objet d'exécution🎜rrreee🎜fonction fléchée est liée au contexte parent, donc le this pointera vers le composant parent. Pour résoudre le problème dans le troisième cas, remplacez la fonction dans la fonction de rappel par une fonction fléchée. et changez this d'anonyme. L'objet redirige vers le composant externe vue🎜🎜Recommandations associées : "🎜Tutoriel vue.js🎜"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!