脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2.0 父子组件传递函数

Vue2.0父子组件传递函数的教程详解

 更新时间：2017年10月16日 14:53:48   作者：彩笔_小qing  
这篇文章主要介绍了Vue2.0父子组件传递函数的教程详解,需要的朋友可以参考下

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父子组件传递函数的教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • vue中的localStorage使用方法详解

    vue中的localStorage使用方法详解

    在Vue项目中可以直接使用localStorage,它支持Vue2和Vue3,在Vue2中,可以通过`localStorage.setItem()`、`localStorage.getItem()`和`localStorage.removeItem()`来保存、读取和删除数据,本文给大家介绍vue中的localStorage使用详解,感兴趣的朋友一起看看吧
    2025-03-03
  • 深入理解Vue.js轻量高效的前端组件化方案

    深入理解Vue.js轻量高效的前端组件化方案

    这篇文章主要介绍了深入理解Vue.js轻量高效的前端组件化方案 ,需要的朋友可以参考下
    2018-12-12
  • vue的keep-alive中使用EventBus的方法

    vue的keep-alive中使用EventBus的方法

    keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。这篇文章主要介绍了vue的keep-alive中使用EventBus的方法,需要的朋友可以参考下
    2019-04-04
  • vue中el-table实现穿梭框(数据可以上移下移)

    vue中el-table实现穿梭框(数据可以上移下移)

    本文主要介绍了vue中el-table实现穿梭框(数据可以上移下移)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 如何用Vue3切换中英文显示举例说明

    如何用Vue3切换中英文显示举例说明

    这篇文章主要给大家介绍了关于如何用Vue3切换中英文显示的相关资料,在Vue3中使用vue-i18n进行国际化设置,包括安装、配置、在组件中使用$t方法获取翻译字符串,以及可选的动态加载语言包以提高性能,需要的朋友可以参考下
    2024-11-11
  • vue3生命周期原理与生命周期函数简单应用实例分析

    vue3生命周期原理与生命周期函数简单应用实例分析

    这篇文章主要介绍了vue3生命周期原理与生命周期函数,结合简单实例形式分析了vue3的生命周期基本原理、以及各个阶段的生命周期钩子函数功能、使用技巧与相关注意事项,需要的朋友可以参考下
    2023-04-04
  • vue 解决文本框被键盘遮住的问题

    vue 解决文本框被键盘遮住的问题

    今天小编就为大家分享一篇vue 解决文本框被键盘遮住的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • VueJS页面渲染之后如何调用函数

    VueJS页面渲染之后如何调用函数

    这篇文章主要介绍了VueJS页面渲染之后如何调用函数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 深入理解Vue2.x的虚拟DOM diff原理

    深入理解Vue2.x的虚拟DOM diff原理

    本篇文章主要介绍了Vue2.x的虚拟DOM diff原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue路由router详解

    Vue路由router详解

    这篇文章主要介绍了vue router 配置路由的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10

最新评论