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使用prototype定义对象类型
Feb 07 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
BootStrap入门学习第一篇
Aug 28 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
性能优化之代码优化页面加载速度
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代码的53条建议
2008/03/27 PHP
php字符串截取函数用法分析
2014/11/25 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Eval and new funciton not the same thing
2012/12/27 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python 中的 else详解
2016/04/23 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
大学生毕业自我鉴定
2013/11/06 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
葬礼主持词
2015/07/02 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书