vue2子组件把方法传给父组件

Vue2 中子组件向父组件传递方法
在 Vue2 应用程序中，子组件可以通过 $emit 方法来触发自定义事件并向父组件传递数据或调用特定逻辑。这种方式不仅适用于简单的属性值传递，也能够用于复杂场景下的函数执行。
使用 $emit 实现子组件到父组件的方法传递
当希望从子组件内部调用某个操作并通知其父级时，可以在子组件内编写相应处理逻辑，在适当位置使用 this.$emit(eventName, payload) 来发出带有负载的数据流[^1]。这里的 eventName 是自定义名称字符串，用来标识该事件；payload 则是可以携带任意类型的附加信息对象。
对于想要传递整个方法的情况，则可以考虑将此方法封装成一个匿名函数或者箭头函数形式作为参数一同发射出去：
// 子组件中的按钮点击事件处理器
handleClick() {
const methodToPass = () => { /* 定义要传递的具体业务逻辑 */ };

this.$emit('custom-event', methodToPass);
}
登录后复制
接着，在父组件里监听这个名为 'custom-event' 的事件，并接收由子组件传来的回调函数进行后续处理：
<!-- 父组件模板 -->
<child-component v-on:custom-event="receivedMethod"></child-component>
登录后复制
methods: {
receivedMethod(callbackFunction) {
// 执行来自子组件的回调函数
callbackFunction();
}
}
登录后复制
这种方法允许灵活地把子组件内的局部行为暴露给外部环境的同时保持良好的解耦度。
示例代码展示
下面给出一段完整的示例代码片段，展示了如何在一个实际项目中运用上述技术完成子组件向父组件传递方法的任务：
<!-- ChildComponent.vue 文件内容 -->
<template>
<div class="child">
<p>这里是子组件</p>
<!-- 当点击按钮时会触发 handleClick 函数 -->
<button @click="handleClick">点击我以激活父组件功能</button>
</div>
</template>

<script>
export default {
name: 'ChildComponent',

methods: {
handleClick(){
let passedFunc = ()=>{
console.log("这是子组件准备好的消息");
};

this.$emit('invoke-parent-method',passedFunc);
}
},
};
</script>
登录后复制
<!-- ParentComponent.vue 文件内容 -->
<template>
<div id="app">
<h1>欢迎来到Vue2 组件间通讯教程页面</h1>
<!-- 注册子组件实例，并绑定 customEvent 事件 -->
<child-component @invoke-parent-method="parentHandler"/>
</div>
</template>

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

export default {
components:{
ChildComponent,
},

methods: {
parentHandler(func){
func(); // 调用了子组件传来的方法
}
}
};
</script>
登录后复制
通过以上方式实现了子组件向父组件安全有效地传输可执行代码的能力，从而增强了模块间的互动性和灵活性。