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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
JS判断数组四种实现方法详解
Jun 29 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实现以只读方式打开文件的方法
2015/03/16 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
python实现将内容分行输出
2015/11/05 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python线程threading模块用法详解
2020/02/26 Python
Keras loss函数剖析
2020/07/06 Python
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
鲜果饮品店创业计划书
2014/01/21 职场文书
简易离婚协议书范本
2014/10/24 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
门店店长岗位职责
2015/04/14 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
庆元旦主持词
2015/07/06 职场文书
人力资源部工作计划
2019/05/14 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书