-
1. 在子组件中通过this.$parent.event来调用父组件的方法,data参数可选
<template>
<div>
<h1>我是父组件</h1>
<child />
</div>
</template>
<script>
import child from '@/components/child';
export default {
components: {
child
},
methods: {
fatherMethod(data) {
console.log('我是父组件方法');
}
}
};
</script>
<template>
<div>
<h1>我是子组件</h1>
<button @click="childMethod(data)">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod(data);
console.log('调用父组件方法')
}
}
};
</script>
-
2. 在子组件里用$emit向父组件触发一个事件,父组件监听这个事件,data参数可选
<template>
<div>
<h1>我是父组件</h1>
<child @fatherMethod="fatherMethod"/>
</div>
</template>
<script>
import child from '@/components/child';
export default {
components: {
child
},
methods: {
fatherMethod(data) {
console.log('我是父组件方法');
}
}
};
</script>
<template>
<div>
<h1>我是子组件</h1>
<button @click="childMethod(data)">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod(data) {
this.$emit('fatherMethod', data);
console.log('调用父组件方法')
}
}
};
</script>
-
3. 父组件通过props把方法传入子组件中,在子组件里直接调用这个方法,data参数可选
<template>
<div>
<h1>我是父组件</h1>
<child :fatherMethod="fatherMethod" />
</div>
</template>
<script>
import child from '@/components/child';
export default {
components: {
child
},
methods: {
fatherMethod(data) {
console.log('我是父组件方法');
}
}
};
</script>
<template>
<div>
<h1>我是子组件</h1>
<button @click="childMethod(data)">点击</button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod(data) {
if (this.fatherMethod) {
this.fatherMethod(data);
console.log('调用父组件传递的方法')
}
}
}
};
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!