vue 中子组件调用父组件方法(子组件向父组件传值)的三种实现

最新推荐文章于 2025-04-17 19:22:45 发布

SarinaDu

最新推荐文章于 2025-04-17 19:22:45 发布

阅读量4.1k

点赞数 3

分类专栏： vue 文章标签： vue 子父组件传值子组件调用父组件方法

本文链接：https://blog.youkuaiyun.com/m0_37148591/article/details/105380956

版权

本文介绍了在 Vue 中子组件如何调用父组件的方法，包括直接使用 `this.$parent`, 通过 `$emit` 触发自定义事件，以及使用 `props` 传递值。详细讲解了每种方式的核心代码，推荐使用 props 进行父子组件通信。" 96386320,8669235,自动化测试用例排序：随机、贪心与额外贪心算法解析,"['测试', '自动化测试', '算法', '编程', '软件工程']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前言

日常积累，欢迎指正

2、正文

vue2.6.11
博客正文为三种方法的核心代码记录，源代码在 vue-project 的分支 dev-005 ,可以直接获取代码运行查看

2.1、子组件中直接 this.$parent.parentNameInParentMethod()

/** 父组件 */
export default {
   
    methods: {
   
        searchEnter:function(){
   
            console.log('search enter')
        }
    }
}
/** 子组件 */
export default {
   
  name: "HomeHeader",
  methods: {
   
    enterFn: function() {
   
      this.$parent.searchEnter()
    }
  }
}

 <input 
    placeholder="请输入关键字"
    @keyup.enter="enterFn" />

如果有向父组件传参数的需求的话只需要添加参数即可

export default {
   
  name: "Search",
  methods: {
   
    enterFn: function() {
   
      this.$parent.searchEnter(this.inputText)
    }
  },
  data() {
   
    return {
   
      inputText: ""
    };
  }
}

 <input
    placeholder="请输入关键字"
    v-model=

最低0.47元/天解锁文章