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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
小程序实现层叠卡片滑动效果
Aug 26 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
PHP4.04简明安装
2006/10/09 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
会走路的树教学反思
2014/02/20 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
导游词之上海豫园
2019/10/24 职场文书
七年级作文之游记
2019/12/11 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
关于Redis的主从复制及哨兵问题
2022/06/16 Redis
VUE递归树形实现多级列表
2022/07/15 Vue.js