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组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。