Vue2.0父子组件传递函数的教程详解


Posted in Javascript onOctober 16, 2017

Vue.js 是什么

Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递.

1. 通过props :需要从子组件传参数到父组件时适用

// 父组件.vue

<template>
 <div>
  <ok-input :params='number' :callback='callbackNum'></ok-input>
 </div>
</template>
<script type="text/ecmascript-6">
 import okInput from '../ok-input/okinput.vue';
 export default {
  props: {},
  data() {
   return {
    number: {},
    callbackNum: function (x) {
     console.log(x);
    }
   };
  },
  methods: {
  },
  components: {
   'ok-input': okInput
  }
 };
</script>

// 子组件.vue

<template>
 <div>
   <input v-model='numVal' @change='handleFun'></input>
 </div>
</template>
<script type="text/ecmascript-6">
 import {Input, Select, Option, Button} from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 export default {
  props: {
   params: {
    type: Object,
    default: {
     type: ''
    }
   },
   callback: {}
  },
  data() {
   return {
    x: 'hah',  
    numVal: ''
   };
  },
  methods: {
   handleFun(val) {
     this.callback(val); // 将参数传回父组件中的回调函数
   }
  },
  components: {
   'el-input': Input,
  }
 };
</script>

2.通过$emit: 只需获得当前操作对象时适用

// 父组件.vue
<template>
 <div>
  <ok-input :params='inputs' @change='handleAge'></ok-input>
 </div>
</template>
<script type="text/ecmascript-6">
 import okInput from '../ok-input/okinput.vue';
 export default {
  props: {},
  data() {
   return {
    number: {}
   };
  },
  methods: {
   handleAge(evt) {
    console.log(evt.target.value); // 接收从子组件传过来的当前对象
   }
  },
  components: {
   'ok-input': okInput
  }
 };
</script>

// 子组件.vue

<template>
 <div>
   <input v-model='numVal' @blur='handleChange'></input>
 </div>
</template>
<script type="text/ecmascript-6">
 import {Input, Select, Option, Button} from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 export default {
  props: {
   params: {
    type: Object,
    default: {
     type: ''
    }
   },
   callback: {}
  },
  data() {
   return {
    x: 'hah',  
    numVal: ''
   };
  },
  methods: {
   handleChange(evt) {
    this.$emit('change', evt); // 将当前对象 evt 传递到父组件
   },
  },
  components: {
   'el-input': Input,
  }
 };
</script>

总结

以上所述是小编给大家介绍的Vue2.0父子组件传递函数的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 #Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 #Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 #Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 #Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 #Javascript
AngularJS实现注册表单验证功能
Oct 16 #Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 #Javascript
You might like
php在线打包程序源码
2008/07/27 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
js常用代码段整理
2011/11/30 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
通过cmd进入python的实例操作
2019/06/26 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
python配置文件写入过程详解
2019/10/19 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
简单英文演讲稿
2014/01/01 职场文书
结婚典礼证婚词
2014/01/11 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
小鞋子观后感
2015/06/05 职场文书
经典爱情感言
2015/08/03 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis