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 相关文章推荐
JS运行耗时操作的延时显示方法
Nov 19 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 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
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
form自动提交实例讲解
2017/07/10 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
use jscript List Installed Software
2007/06/11 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python定时器实例代码
2017/11/01 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
小学语文教学反思
2014/02/10 职场文书
中式婚礼主持词
2014/03/13 职场文书
绿色学校实施方案
2014/03/31 职场文书
安全生产月活动总结
2014/05/04 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
教育见习报告范文
2014/11/03 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
五一晚会主持词
2015/07/01 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android