vue父组件通过props如何向子组件传递方法详解


Posted in Javascript onAugust 16, 2017

前言

本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

vue 组件中的 this

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

例如:

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

https://cn.vuejs.org/v2/api/#methods

父组件通过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 );
   }

  },
  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指向父组件。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
让textarea自动调整大小的js代码
Apr 12 Javascript
js字符编码函数区别分析
Dec 28 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
js数组操作常用方法
May 08 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 #Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 #Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
详谈表单重复提交的三种情况及解决方法
Aug 16 #Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 #Javascript
Node.js 的模块知识汇总
Aug 16 #Javascript
vue绑定设置属性的多种方式(5)
Aug 16 #Javascript
You might like
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
详解angular element()方法使用
2017/04/08 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
pygame实现打字游戏
2021/02/19 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
学python爬虫能做什么
2020/07/29 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
写求职信有什么意义
2014/02/17 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
辩论赛主持词
2014/03/18 职场文书
关于读书的演讲稿
2014/05/07 职场文书
村创先争优活动总结
2014/08/28 职场文书
美术教师个人工作总结
2015/02/06 职场文书
党支部半年考察意见
2015/06/01 职场文书
八年级作文之友谊
2019/12/02 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
Redis持久化与主从复制的实践
2021/04/27 Redis
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫