vue中实现组件间通信的方法

这篇文章主要介绍了vue中实现组件间通信的方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中实现组件间通信的方法文章都会有所收获，下面我们一起来看看吧。

父组件传子组件

父传子方法（一） 属性传递 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中实现组件间通信的方法”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。