Vue2 props 传方法

Vue2 中通过 Props 传递方法
在 Vue2 中，props 不仅可以用于传递基本类型的值（如字符串、数字），还可以用来传递函数。这使得父组件能够将处理逻辑封装成方法并通过 props 下发到子组件中执行。
定义并传递方法
为了实现这一点，在定义子组件时需声明接收的方法类型为 Function：
// 子组件 MyComponent.vue
export default {
name: 'MyComponent',
props: {
handleClick: { // 接收来自父级的消息点击事件处理器
type: Function,
required: true
}
},
methods: {
invokeParentMethod() {
this.handleClick(); // 调用由父组件提供的回调函数
}
}
}
登录后复制
接着，在父组件里实例化该子组件的同时指定具体的回调行为：
<!-- 父组件 ParentComponent.vue -->
<template>
<div class="parent">
<!-- 将 handleButtonClick 方法作为 prop 传给子组件 -->
<my-component @click.native="handleButtonClick"></my-component>
</div>
</template>

<script>
import MyComponent from './components/MyComponent';

export default {
components: {
MyComponent
},
methods: {
handleButtonClick() {
console.log('按钮被点击！');
}
}
};
</script>
登录后复制
这里需要注意的是，当希望监听子组件内部触发的 DOM 事件时，可以在绑定自定义事件名前加上 .native 后缀来确保正确捕获底层原生事件[^4]。
另外，考虑到性能优化方面，如果传递的方法不依赖于任何响应式的状态，则建议将其定义为普通的 JavaScript 函数而非箭头函数或类中的方法形式，因为后者可能会导致不必要的重新渲染[^1]。