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 相关文章推荐
javascript时区函数介绍
Sep 14 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
js常用正则表达式集锦
May 17 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 Javascript
JavaScript 反射学习技巧
Oct 16 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
解决GD中文乱码问题
2007/02/14 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
8个PHP数组面试题
2015/06/23 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Django实现发送邮件功能
2019/07/18 Python
python如何爬取网页中的文字
2020/07/28 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
高一英语教学反思
2014/01/22 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
运动会入场词50字
2014/02/20 职场文书
大学军训感言800字
2014/02/27 职场文书
纠风工作实施方案
2014/03/15 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
科学发展观演讲稿
2014/09/11 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
幼儿学前班评语
2014/12/29 职场文书
英语感谢信范文
2015/01/20 职场文书
打架检讨书范文
2015/01/27 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android