vue组件间通信
2017-09-05 16:38
429 查看
随着vue等框架盛行,组件开发已然成为一种趋势,组件开发中我们经常遇到的就是父子组件通信了。下面简单介绍下vue中父子组件如何通信:
子组件要显式地用 props 选项声明它期待获得的数据:
父组件中我们可以这样向如上子组件传递数据
这样我们就将4传递到子组件中了。
1、子组件通知父组件
- 使用 on(eventName)监听事件使用−emit(eventName) 触发事件
在子组件中,我们可以通过emit触发事件,在父组件用on来监听。
比如在子组件某个方法中:
在父组件中:
可以看到我们用@deleteFileEvt=’deleteFile’监听了deleteFileEvt事件,deleteFile函数处理:
2、父组件调用子组件方法
说完了子组件通知父组件,自然也有父组件需要调用子组件方法的时候:
如上是父组件中的子组件,通过给一个ref属性,然后我们可以在父组件的方法中通过this.refs.A2.childMethod()调用子组件的childMethod方法。
还有一种通信手段就是我们的vuex
vuex的用法请参考官网vuex
一、使用props传递数据
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的 props 选项。子组件要显式地用 props 选项声明它期待获得的数据:
<template> <input class="el-input-money" :value="currentValue" @blur="handleBlur" @focus="handleFocus" @input="handleInput" @change.native='true' :disabled="disabled" :size="size" :max="max" :min="min" :decimalPlaces="decimalPlaces" :placeholder="placeholder" ref="input"></input> </template> <script> export default { props: { max: { type: [Number, Function], default: Infinity, }, min: { type: [Number, Function], default: -Infinity, }, value: { type: [Number, String], default: '0.00', }, decimalPlaces: { type: Number, default: 2, }, placeholder: String, disabled: Boolean, size: String, } } } </script>
父组件中我们可以这样向如上子组件传递数据
<v-moneyInput v-model='hwData.A3' :decimalPlaces="4" ref='A3'></v-moneyInput>
这样我们就将4传递到子组件中了。
二、事件通信
还有一种常用的通信手段便是通过事件了。1、子组件通知父组件
- 使用 on(eventName)监听事件使用−emit(eventName) 触发事件
在子组件中,我们可以通过emit触发事件,在父组件用on来监听。
比如在子组件某个方法中:
this.$emit('deleteFileEvt',fileKey);
在父组件中:
<v-fileupload :params='item' @completeUploadEvt='saveFbzlxxWithoutImageData' @deleteFileEvt='deleteFile' :useDefaultTitle='false' :uploadAddr="'/api/dzzl/upload?filepath=/'" :ref='item.fbzl_dm'></v-fileupload>
可以看到我们用@deleteFileEvt=’deleteFile’监听了deleteFileEvt事件,deleteFile函数处理:
deleteFile(fileKey) { let self = this; this.saveFileArr.map((index, item) => { if (item == fileKey) { self.saveFileArr.splice(index, 1); return false; } }) }
2、父组件调用子组件方法
说完了子组件通知父组件,自然也有父组件需要调用子组件方法的时候:
<v-moneyInput v-model='hwData.A2' ref='A2'></v-moneyInput>
如上是父组件中的子组件,通过给一个ref属性,然后我们可以在父组件的方法中通过this.refs.A2.childMethod()调用子组件的childMethod方法。
三、非父子组件通信
非父子组件通信的需求我们可能也会遇到,但我还没遇到过。可以参考vue官网非父子组件通信还有一种通信手段就是我们的vuex
vuex的用法请参考官网vuex
相关文章推荐
- Vue项目实战(四)- 组件之间的通信
- vue.js组件与组件之间的通信
- vue2.0组件之间的通信
- 通信vue2.0组件
- vue 父子组件通信
- Vuejs——(10)组件——父子组件通信
- vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
- Vuex: 实现同级组件的简单通信
- vue学习笔记 - 组件通信01
- vue组件通信,传递值
- vue的props和$emit / 父子组件通信
- Vue中父组件向子组件通信
- vue开发:vue2.0父子组件及非父子组件之间的通信方法
- VUE(一)组件之间的通信
- vue2.0--组件通信(非vuex法)
- vue如何实现父子组件通信,以及非父子组件通信(待看)
- 【vue】父子组件间通信----传值
- vue综合组件间的通信详解
- Vuejs第十篇之vuejs父子组件通信
- Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)