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