vue组件间通信
组件间通信(父子,兄弟)
相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html
学习链接Vue.js——60分钟快速入门http://www.cnblogs.com/keepfool/p/5619070.html
http://www.cnblogs.com/keepfool/p/5637834.html
父组件传子组件
父传子方法(一) 属性传递 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组件间通信的更多相关文章
- vue组件间通信六种方式(完整版)
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- vue组件间通信子与父
二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...
- Vue组件间通信-Vuex
上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
- Vue组件间通信:一个例子学会Vue组件-Vue.js学习总结)(转载)
详情请点击 http://www.jianshu.com/p/9ad1ba89a04b
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- VUE组件如何通信
Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...
- vue-learning:31 - component - 组件间通信的6种方法
vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
随机推荐
- yiled(),wait(),sleep()方法区别
yiled():让步 wait():等待 sleep():休眠 yiled是让步,会使当前线程由运行状态进入到就绪状态,让其他优先级高线程先执行,但是如果是同一优先级的线程,那么谁先执行就不确定了.它 ...
- Task的运行原理和工作窃取
在net4.0以前,当调用ThreadPool.QueueUserWorkItem方法往线程池中插入作业时,会把作业内容(其实就是一个委托)放到线程池中的一个全局队列中,然后线程池中的线程按照先进先出 ...
- win7 32位 import cv2 失败 ImportError:DLL load fail:找不到指定模块
引起问题的可能性太多,这里记录比较一下比较少见的错误原因 缺少dll文件 https://www.dll-files.com/api-ms-win-downlevel-shlwapi-l1-1-0.d ...
- SpringMVC 之 mvc:exclude-mapping 不拦截某个请求
在使用 SpringMVC 是,配置了一个 Session 拦截器,用于拦截用户是否登录,但是用户访问登录页面和注册页面时就不需要拦截了,这时就需要用到这个标签了 <mvc:execlude-m ...
- vi命令文件编辑
vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器. Linux中的vi编辑器叫vim,它是vi的增强版(vi Improved),与vi编辑器完全兼容,而且实现了很多增强功能 ...
- luogu P2992 [USACO10OPEN]三角形计数Triangle Counting
https://www.luogu.org/problemnew/solution/P2992 考虑包含原点,不包含原点的三角形有什么特征. 包含原点的三角形:任意找一个顶点和原点连线,一定能把另外两 ...
- linux系统日志__ratelimit: N callbacks suppressed
报错 今天线上遇到故障,php进行因为段错误退出了,系统日志中的kernel报错如下: Feb 25 22:25:11 web_server_01 kernel: __ratelimit: 250 c ...
- mysql中while循环以及变量声明以及dilimiter
首先我们查看一个正确的完整的一个存储过程 ①其中delimiter命令解释如下:默认情况下,delimiter是分号:.在命令行客户端中,如果有一行命令以分号结束,那么回车后,mysql将会执行该命令 ...
- MT【136】一道三次函数的最佳逼近问题
已知函数\(f(x)=-x^3-3x^2+(1+a)x+b(a<0,b\in R)\), 若\(|f(x)|\)在\([-2,0]\)上的最大值为\(M(a,b)\),求\(M(a,b)\)的最 ...
- BZOJ 4408: [Fjoi 2016]神秘数
4408: [Fjoi 2016]神秘数 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 464 Solved: 281[Submit][Status ...