What does this in vue mean?

In Vue, the reference of this depends on the context object: in a component instance, this refers to the current component instance. In an event handler, this refers to the event's target element. In a custom directive, this refers to the context object in the directive function. In in-template methods, this refers to the current component instance.

this in Vue

In Vue.js, this The value of depends on the context object of the current context, which usually refers to:

Component instance

When this is used within a component , it refers to the current component instance. This allows the component to access its:

• Data
• Methods
• Computed properties
• Lifecycle hooks

For example , in the following component, this.message refers to the message data property of the component instance:

<code class="vue"><template>
  <div>{{ this.message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script></code>

Event handler

When this is used in an event handler, it refers to the target element of the event. For example, in the following code, this refers to the button element:

<code class="vue"><template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this) // 输出按钮元素
    }
  }
}
</script></code>

Custom Directive

When this is in the self When used within a definition directive, it refers to the context object in the directive's bind, inserted, or update function. This allows the directive to access:

• Bound elements
• Properties attached to the element
• Vue instance (via this.vm)

Intra-template methods

In internal template methods, this refers to the current component instance. This allows the component's data and methods to be accessed in the template just like within the component script. For example, the following code calls the component's greet() method in the template:

<code class="vue"><template>
  <div>{{ greet('Alice') }}</div>
</template>

<script>
export default {
  methods: {
    greet(name) {
      return `Hello, ${name}!`
    }
  }
}
</script></code>

The above is the detailed content of What does this in vue mean?. For more information, please follow other related articles on the PHP Chinese website!