vue组件间通信解析
时间：2021-04-21 09:38:47|栏目：vue|点击： 次
组件间通信（父子，兄弟）
相关链接\组件通信：点击查看
学习链接：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组件学习教程进行学习。
上一篇：vue实现列表滚动的过渡动画
栏 目：vue
下一篇：vue实现点击图片放大效果
本文标题：vue组件间通信解析
本文地址：http://www.codeinn.net/misctech/105770.html
