发布于2022-05-31 21:40 阅读(510) 评论(0) 点赞(13) 收藏(1)
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>
原文链接:https://blog.csdn.net/qq_44858608/article/details/124156157
作者:大哥你来啦
链接:http://www.qianduanheidong.com/blog/article/361042/482c405ec73cc4eafffc/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!