在 vue 3 中，方法可用于执行特定功能，有两种语法：方法选项语法和模板方法语法。方法修饰符可自定义方法行为，如 .prevent、.once 等。此外，可以通过 this 访问组件实例的属性、数据和方法。使用方法时，可以通过 v-on 指令或直接调用进行。

Vue 3 中如何编写方法

引言

Vue 3 中的方法是组件或实例的一部分，用于执行特定功能。它们可以用来更新状态、处理数据或与外部服务交互。

语法

立即学习“前端免费学习笔记（深入）”；

Vue 3 中的方法有两种语法：

• 方法选项语法：

export default {
  methods: {
    greet() {
      console.log('Hello, world!');
    }
  }
}

• 模板方法语法：

<template><button>Greet</button>
</template><script>
export default {
  methods: {
    greet() {
      console.log('Hello, world!');
    }
  }
}
</script>

方法修饰符

Vue 3 提供了几个方法修饰符，用于自定义方法的行为：

• .native：阻止 Vue 拦截事件监听器。
• .prevent：防止链接导航。
• .self：仅在事件目标是组件自身时调用方法。
• .once：仅调用方法一次。

访问组件实例

在方法中，可以通过 this 来访问组件实例。这使您可以访问组件的属性、数据和方法。

使用方法

可以通过以下方式使用方法：

• 在模板中：使用 v-on 指令将事件绑定到方法。
• 在脚本中：直接调用方法。

范例

让我们编写一个方法，当单击按钮时输出一条消息：

<template><button>Greet</button>
</template><script>
export default {
  methods: {
    greet() {
      console.log('Hello, world!');
    }
  }
}
</script>