Vue中子组件调用父组件的3种方法实例
更新时间：2022年05月24日 11:27:44 作者：Xwzzz_
vue子组件调用父组件的方法其实不难,最近整理了一下,下面这篇文章主要给大家介绍了关于Vue中子组件调用父组件的3种方法,需要的朋友可以参考下
Vue中子组件调用父组件的三种方法：
1.直接在子组件中通过“this.$parent.event”来调用父组件的方法。
父组件
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from './components/childcomponent';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('父组件方法');
}
}
};
</script>
子组件
<template>
<div>
<button @click="childMethod()">点击按钮</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
2.子组件用“$emit”向父组件触发一个事件,父组件监听这个事件即可。
父组件
<template>
<div>
<child @fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from './components/childcomponent'
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('父组件方法');
}
}
};
</script>
子组件
<template>
<div>
<button @click="childMethod()">点击按钮</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('fatherMethod');
}
}
};
</script>
3.父组件把方法传入子组件中,在子组件里直接调用这个方法即可。
父组件
<template>
<div>
<child :fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from './components/childcomponent';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('父组件方法');
}
}
};
</script>
子组件
<template>
<div>
<button @click="childMethod()">点击按钮</button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
this.fatherMethod();
}
}
}
};
</script>总结
到此这篇关于Vue中子组件调用父组件的3种方法的文章就介绍到这了,更多相关Vue子组件调用父组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了浅谈vue项目如何打包扔向服务器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue监听滚动事件的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
vue3 + Ant Design 实现双表头表格的效果(横向表头+纵向表头)
这篇文章主要介绍了vue3 + Ant Design 实现双表头表格（横向表头+纵向表头）,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue+php实现的微博留言功能,结合完整实例形式分析了vue.js前台留言及后台php交互功能相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要为大家介绍了Vue响应式原理及双向数据绑定的示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了vue封装el-upload批量上传只请求一次接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了详解vue-cli脚手架中webpack配置方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo
这篇文章主要为大家介绍了解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
在 Vue 3 中，父子组件之间进行通信有多种方式，下面简单介绍下常见的方式及其用法和使用场景，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2024-01-01
这篇文章主要介绍了vue3表单输入绑定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论