优雅的使用vue父组件通过props向子组件传递

在Vue 中,可以使用 props 向子组件传递数据，下面这篇文章主要给大家介绍了关于vue父组件通过props如何向子组件传递方法的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。

vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意。

例如： 注意：不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) 。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.myProp 将是 undefined

父组件通过props向子组件传递方法 父组件调用子组件，通过绑定callback属性，将方法传给子组件：

App.vue 
 
<search-bar class="f-fr" placeholder="输入名字" mutationName='resetListData' :callback="callback"/>

复制代码

子组件通过props获取父组件传过来的callback方法：

SearchBar.vue
 
export default {
 name: 'SearchBar',
 data() {
  return {
   input: ''
  }
 },
 methods: {
  setName: function () {
   var input = this.input;
   if (input.trim() == '') {
    alert("empty");
   }
   else {
    Api.searchTest(this.input,this.success );
   }//欢迎加入全栈开发交流圈一起学习交流：864305860
   },//面向1-3年前端人员
  success(responseData) {//帮助突破技术瓶颈，提升思维能力
   this.callback(responseData);
  },
 },
 props: ['placeholder', 'apiName', 'moduleName', 'mutationName','callback']
}

复制代码

通过 data

export default {
 ...
 data:function() {
 return {
  callback:function(responseData) {
  this.$store.commit('resetListData', responseData);
  }
 }
 },
 ...
};
复制代码

此处callback以函数对象的方式，传入子组件，子组件调用的时候，this指向子组件 通过 methods

export default {
 ...
 methods: {
 callback(responseData) {
  this.$store.commit('resetListData', responseData);
 }
 }
};
复制代码

此处callback是父组件的一个方法，个人理解，当父组件初始化时，该方法的this上下文就绑定了父组件的实例，因此当子组件调用callback 方法时，this指向父组件。

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。