Vue Methods

In Vue components, methods are functions defined within <script setup>. They are typically used to respond to events, perform calculations, or encapsulate reusable logic. These methods can be called by event handlers in templates or used in other logic within the component.

Defining Methods

In Vue 3's Composition API, we directly declare functions within the <script setup> block. These functions are automatically exposed for use in templates.

<script setup>
import { ref } from 'vue'

const name = ref('Vue.js')

// Define a method
function greet() {
  // Methods can access all variables and functions within the <script setup> scope
  alert(`Hello, ${name.value}!`);
}
</script>

<template>
  <!-- Call this method via @click event in the template -->
  <button @click="greet">Greet</button>
</template>

In this example:

1. We defined a function named greet.
2. This function can access the reactive variable name. Note that when accessing variables created with ref in the <script> section, you need to use .value.
3. In the template, we use @click="greet" to bind the button's click event to the greet method. When the button is clicked, the greet function will execute.

Methods with Parameters

Methods can accept parameters. You can pass static values or dynamic data when calling them.

<script setup>
function say(message) {
  alert(message)
}
</script>

<template>
  <!-- Pass a static string -->
  <button @click="say('hello')">Say hello</button>

  <!-- Pass a dynamic variable (assuming msg is a ref or other variable) -->
  <button @click="say(msg)">Say msg</button>
</template>

Event Object

Sometimes, you need to access the native DOM event object. You can pass the special $event variable into a method:

<script setup>
function warn(message, event) {
  // Now we can access the native event object
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
</script>

<template>
  <!-- Here, we use the $event variable to pass the native DOM event -->
  <button @click="warn('Form cannot be submitted yet.', $event)">
    Submit
  </button>
</template>

If the event handler is an inline function (an arrow function), the event object will also be automatically passed:

<template>
  <button @click="(event) => warn('Form cannot be submitted yet.', event)">
    Submit
  </button>
</template>

Difference Between Methods and Regular Functions

In the context of the Composition API, the term "method" is more of a conceptual designation for functions created to respond to events or encapsulate specific behaviors. Technically, they are just regular JavaScript functions.

Unlike Vue 2's Options API, in the Composition API, you don't need to define methods in a specific methods object. You simply declare functions in <script setup>, and Vue will automatically handle the rest, making them available in templates.

This approach provides greater flexibility, allowing you to organize code based on logical functionality rather than being constrained by a fixed options structure.