Bootstrap

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

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=
;