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 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python类的专用方法实例分析
2015/01/09 Python
Python如何发布程序的详细教程
2018/10/09 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
物流毕业生个人的自我评价
2014/02/13 职场文书
大学生党员自我批评
2014/02/14 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
大班下学期个人总结
2015/02/13 职场文书
党员承诺书格式范文
2015/04/28 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android