Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the meaning of this in vuejs". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the meaning of this in vuejs"?

The meaning of this in vuejs: 1, in the vue component or instance, this represents the Vue instance that calls it; 2, in the callback function, this represents the parent component; 3, in the arrow function, this represents the object in which it is defined, that is, the host object.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

This variable in Vuejs

1 in the vue component

Use this,this in all Vue lifecycle hook methods (such as beforeCreate,created,beforeMount,mounted,beforeUpdate, updated,beforeDestroy, and destroyed) to refer to the Vue instance that invokes it, namely (new Vue)

New Vue ({data: {a: 1}, created: function () {console.log ('an is:'+ this.a)} methods: {plus: function () {this.a++})

In vue components or instances, whether it is the life cycle hook function created or custom function plus, the this in them all refers to the current vue instance

2 callback function

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)}}

At this point, the callback function function (results, status) will re-point the this to the anonymous object (analogous java anonymous class), so the this refers to the parent component, and the function cannot be found if you execute this.buscarLojas.

3 Arrow function

The arrow function does not have its own this, its this is inherited; by default, it points to the object in which it is defined (the host object), not the object at execution time

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 arrow function The arrow function does not have its own this, and its this inherits from it, pointing to the host object in which it was defined, where this points to window. This. },}

The arrow function is bound to the parent context, so the this points to the parent component. In view of the problem in case 3, changing the function in the callback function to the arrow function will redirect the this from an anonymous object to the external vue component.

At this point, I believe you have a deeper understanding of "what is the meaning of this in vuejs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.