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高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 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
合作指挥官:孟斯克
2020/03/16 星际争霸
php中var_export与var_dump的区别分析
2010/08/21 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python读取txt某几列绘图的方法
2018/10/14 Python
Python中常用的内置方法
2019/01/28 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
工程部经理岗位职责
2013/12/08 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
同学聚会邀请函
2015/01/30 职场文书
升职自荐信怎么写
2015/03/05 职场文书
工地食品安全责任书
2015/05/09 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
毕业欢送会致辞
2015/07/29 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python