これはvuejsでは何を意味しますか

vuejs におけるこれの意味: 1. vue コンポーネントまたはインスタンスでは、これはそれを呼び出す Vue インスタンスを表します; 2. コールバック関数では、これは親コンポーネントを表します; 3. アロー関数では、これは、それが配置されているオブジェクトがホスト オブジェクトであるという定義を表します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vuejs のこの変数

1 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 を 匿名オブジェクト にリダイレクトします。 (analogyjava anonymous class) したがって、this は親コンポーネントを参照し、this.buscarLojas を実行すると、関数が見つからないというエラーが報告されます

3 アロー関数##アロー関数

には独自の

this がありません。その this は継承されます。Default は、実行時のオブジェクトではなく、定義時にオブジェクト (ホスト オブジェクト) を指します

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.......
   },
}

Arrow function

は

parent context にバインドされているため、this は親コンポーネントを指します。ケース 3 の問題では、コールバック関数は次のようになります。 function はアロー関数に変更され、this を匿名オブジェクトから外部の vue コンポーネントにリダイレクトします。関連する推奨事項: "vue .js チュートリアル

》

以上がこれはvuejsでは何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。