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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

到此，相信大家对“vue组件间通信如何实现”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！