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 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
javascript每日必学之多态
Feb 23 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
关于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 数组使用详解 推荐
2011/06/02 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP7常量数组用法分析
2016/09/26 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php生出随机字符串
2017/07/06 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
document.compatMode介绍
2009/05/21 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
angular.element方法汇总
2015/01/07 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
layui分页效果实现代码
2017/05/19 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python中dict()的高级用法实现
2019/11/13 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
猫咪家具:CatsPlay
2018/11/03 全球购物
工作自荐信
2013/12/11 职场文书
大四学生思想汇报
2014/01/13 职场文书
调查研究项目计划书
2014/04/29 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
Python列表的索引与切片
2022/04/07 Python