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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
JavaScript Promise启示录
Aug 12 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
script标签属性用type还是language
Jan 21 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
JavaScript运行机制实例分析
Apr 11 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
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
javascript中length属性的探索
2011/07/31 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
Python实现的端口扫描功能示例
2018/04/08 Python
对python 命令的-u参数详解
2018/12/03 Python
使用python3构建文件传输的方法
2019/02/13 Python
【python】matplotlib动态显示详解
2019/04/11 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
UNIX特点都有哪些
2016/04/05 面试题
如何撰写岗位职责
2014/02/01 职场文书
致裁判员加油稿
2014/02/08 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
银行资信证明
2015/06/17 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
python实现图片九宫格分割的示例
2021/04/25 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
关于EntityWrapper的in用法
2022/03/22 Java/Android