vue实现方法调用
Vue 方法调用的实现方式
在 Vue 中，方法调用主要通过 methods 选项定义，并通过模板或脚本直接调用。以下是常见的实现方式：
在模板中直接调用方法
通过 v-on 指令（或简写 @）绑定事件触发方法：
<button @click="handleClick">点击触发方法</button>在脚本中调用方法
通过 this 访问实例方法：
export default {
methods: {
showMessage() {
console.log('方法被调用');
}
},
mounted() {
this.showMessage(); // 组件挂载时自动调用
}
}传递参数
方法可以接收动态参数：
<button @click="handleParams('参数1', 123)">传递参数</button>methods: {
handleParams(arg1, arg2) {
console.log(arg1, arg2); // 输出: "参数1", 123
}
}使用 $emit 调用父组件方法
子组件通过事件触发父组件方法：
<!-- 子组件 -->
<button @click="$emit('custom-event')">触发父组件方法</button>
<!-- 父组件 -->
<child-component @custom-event="parentMethod" />异步方法调用
结合 async/await 处理异步操作：
methods: {
async fetchData() {
const res = await axios.get('/api/data');
this.data = res.data;
}
}注意事项
- 避免在模板中直接调用方法时使用复杂逻辑，建议将逻辑封装在方法内。
- 方法名需遵循 JavaScript 命名规范，避免与 Vue 内置属性冲突。
- 箭头函数会改变
this指向，需谨慎使用。
