vue组件间通信解析


Posted in Javascript onMarch 01, 2017

组件间通信(父子,兄弟)

相关链接\组件通信:点击查看

学习链接:Vue.js——60分钟快速入门点击查看

分分钟玩转Vue.js组件点击查看

父组件传子组件

父传子方法(一) 属性传递 props

//子组件
<template> 
 <ul>
 <li v-for="item in dataList">{{item}}</li>
 </ul> 
</template>

<script>
 export default { 
 props : { dataList : [] }
 }
</script>
//父组件
<template>
 <component-child v-bind:data-list="dataList"> </component-child> 
 <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>

import ComponentChild from './child.vue'
export default { 
 data () { 
 return { 
 dataInput: "", 
 dataList : [ 'hello world!','welcome to use vue.js' ] 
 } 
 }, 
 components : { ComponentChild }, 
 methods : { 
 addDataItem () { 
 let self = this 
 if( !(self.dataInput && self.dataInput.length > 0) ) { return } 
 self.dataList.push( self.dataInput ) 
 self.dataInput = "" 
 } 
 }
}
</script>

父传子方法(二) 广播事件传递 vm.$broadcast

//子组件
<template> 
 <ul> 
 <li v-for="item in dataList">{{item}}</li> 
 </ul> 
</template>

<script>
export default { 
 data () { 
 return { 
 dataList : [ 'hello world!', 'welcome to use vue.js' ] 
 } 
 }, 
 events : { 
 addChildDataEvent : function ( dataInput ) { 
 this.dataList.push( dataInput ) 
 } 
 }
}
</script>
//父组件
<template> 
 <component-child></component-child> 
 <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>
 import ComponentChild from './child.vue'
 export default { 
 data () { 
 return { dataInput: "" } 
 }, 
 components : { ComponentChild }, 
 methods : { 
 addDataItem () { 
 let self = this 
 if( !(self.dataInput && self.dataInput.length > 0) ) { return } 
 //广播到子组件 
 self.$broadcast( 'addChildDataEvent', self.dataInput ) 
 self.dataInput = "" } 
 }
 }
</script>

子组件传父组件

子传父方法 派遣事件传递 vm.$dispatch

//子组件
<template> 
 <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>
 export default { 
 data () { 
 return { 
 dataInput: "" 
 } 
 }, 
 methods : { 
 addDataItem () { 
 let self = this
 if( !(self.dataInput && self.dataInput.length > 0) ) { return }
 //派遣事件到父组件 
 self.$dispatch( 'addFatherDataEvent', self.dataInput )
 self.dataInput = "" 
 } 
 }
 }
</script>
//父组件
<template> 
 <ul> 
 <li v-for="item in dataList">{{item}}</li> 
 </ul> 
 <component-child></component-child>
</template>

<script>
import ComponentChild from './child.vue'
export default { 
 data () { 
 return { 
 dataList : [ 'hello world!', 'welcome to use vue.js' ] 
 } 
 },
 components : { ComponentChild }, 
 events : { 
 addFatherDataEvent : function ( dataInput ) { 
 this.dataList.push( dataInput ) 
 } 
 }
}
</script>

兄弟组件互传

父组件代理传递 子(vm.dispatch )父 ( vm.broadcast )子 事件方法传递

<template> 
 <ul> 
 <li v-for="item in dataList">{{item}}</li> 
 </ul> 
</template>

<script> 
export default { 
 data () { 
 return { 
 dataList : [ 'hello world!', 'welcome to use vue.js' ] 
 } 
 },
 events : { 
 addChildDataEvent : function ( dataInput ) { 
 this.dataList.push( dataInput ) 
 } 
 }
}
</script>
<template>
 <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>
export default { 
 data () { 
 return { dataInput: "" } 
 }, 
 methods : { 
 addDataItem () { 
 let self = this 
 if( !(self.dataInput && self.dataInput.length > 0) ) { return } //派遣事件到父组件 
 self.$dispatch( 'agentDataEvent', self.dataInput ) 
 self.dataInput = "" 
 }
 }
}
</script>
<template> 
<component-child1></component-child1>
<component-child2></component-child2>
</template>

<script>
import ComponentChild1 from './child1.vue'
import ComponentChild2 from './child2.vue'

export default { 
 components : { ComponentChild1, ComponentChild2 }, 
 events : { 
 agentDataEvent : function( dataInput ) { 
 this.$broadcast('addChildDataEvent', dataInput) 
 } 
 }
}
</script>

实例间通信

把实例当做参数传入另一个实例

<template>
 <div> 
 <p>实例间通信</p> 
 <ul>
 <li v-for="item in dataList">{{item}}</li>
 </ul> 
 </div>
</template>
<script> 
export default { 
 data () { 
 return { 
 dataList : [ 'hello world!', 'welcome to use vue.js' ] 
 } 
 }, 
 events : { 
 addDataEvent : function ( dataInput ) { 
 this.dataList.push( dataInput ) 
 } 
 }
}
</script>
<template>
<input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
</template>

<script>
export default { 
 data () { 
 return { 
 dataInput: "", 
 otherApp : {} 
 } 
 }, 
 methods : { 
 addDataItem ( ) { 
 let self = this 
 if( !(self.dataInput && self.dataInput.length > 0) ) { return } //触发其他实例事件 
 self.otherApp.$emit( 'addDataEvent', self.dataInput ) 
 self.dataInput = "" 
 }, 
 setOtherApp ( app ) { 
 this.otherApp = app 
 }
 }
 
}
</script>
import Vue from "vue"
import App1 from "./communication5/app1.vue"
import App2 from "./communication5/app2.vue"

let AppVM1 = new Vue( App1 ).$mount('#app')
let AppVM2 = new Vue( App2 ).$mount('#app2')

AppVM2.setOtherApp( AppVM1 )

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
性能优化之代码优化页面加载速度
Mar 01 #Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 #Javascript
Javascript仿京东放大镜的效果
Mar 01 #Javascript
Ajax实现不刷新取最新商品
Mar 01 #Javascript
Angular1.x复杂指令实例详解
Mar 01 #Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 #Javascript
Angular1.x自定义指令实例详解
Mar 01 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
大学生的自我鉴定范文
2014/01/21 职场文书
历史学专业求职信
2014/06/19 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js