Vue组件通信的几种实现方法

//comA组件A
export default {
 data () {
 return {
  title: '测试通信'
 }
 },
 methods: {
 sayHello () {
  window.alert('你好');
 }
 }
}

<template>
 <comA ref="comA"></comA>
</template>
<script>
 export default {
 mounted () {
  const comA = this.$refs.comA;
  console.log(comA.title); // 测试通信
  comA.sayHello(); // 调用组件comA的方法
 }
 }
</script>

<div id="count">
 <button @click="showmsg">
  显示两个组件的信息
 </button>
  <child1></child1>
 <child2></child2>
 </div>
<template id="child1">
 <div>
 {{ msg }}
 </div>
</template>
<template id="child2">
 <div>
 {{ msg }}
 </div>
</template>
<script>
 Vue.component('child1', {
  template: '#child1',
  data () {
  return {
   msg: '这是子组件1的信息'
  }
  }
 })
 Vue.component('child2', {
  template: '#child2',
  data () {
  return {
   msg: '这是子组件2的信息'
  }
  }
 })
 new Vue({
  el: '#count',
  data: {
  
  },
  methods: {
  showmsg () {
   for(var i = 0; i < this.$children.length; i++) {
   alert(this.$children[i].msg)
   }
  }
  }
 })
</script>

<div id="count">
 父组件中的msg: {{ msg }}
  <child1 ref='c1'></child1>
 <child2 ref='c2'></child2>
 </div>
<template id="child1">
 <div>
 {{ msg }}
 <button @click="showpmsg">
  显示父组件msg
 </button>
 </div>
</template>
<template id="child2">
 <div>
 {{ msg }}
 </div>
</template>
<script>
 Vue.component('child1', {
  template: '#child1',
  data () {
  return {
   msg: '这是子组件1的信息'
  }
  },
  methods: {
  showpmsg () {
    alert(this.$parent.msg)
  }
  }
 })
 Vue.component('child2', {
  template: '#child2',
  data () {
  return {
   msg: '这是子组件2的信息'
  }
  }
 })
 new Vue({
  el: '#count',
  data: {
  msg: 'hello parent'
  }
 })
</script>

// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>

// bus.js 事件总线

import Vue from 'vue'
export const $bus = new Vue()

// main.js我们再main入口中定义这个事件总线
Vue.prototype.$bus = new Vue()

<template>
 <div>
 {{number}}
 <button @click="handleAddRandom">随机增加</button>
 </div>
</template>

<script>
import $bus from ../bus.js
 export default {
 name: "counter",
 props: {
  number: {
  type: Number
  }
 },
 methods: {
  handleAddRandom() {
  const num = Math.floor(Math.random() * 100 + 1);
  console.log("生产的num:" + num);
  this.$bus.$emit('add', num);
  }
 }
 }
</script>

<template>
 <div>
 随机增加:
 <counter :number="number"></counter>
 </div>
</template>

<script>
 import counter from './counter'

 export default {
 name: "index",
 components: {
  counter
 },
 data() {
  return {
  number: 0
  }
 },
 methods: {
  handleAddRandom(num) {
  this.number += num;
  }
 },
 created() {
  //this.$bus.$on需要在created中使用，否则不会生效
  this.$bus.$on('add', this.handleAddRandom);
 },
 beforeDestroy() {
  //需要在beforeDestroy中移除
  this.$bus.$off('add', this.handleAddRandom);
 }
 }
</script>

<style scoped>

</style>

// A组件
export default {
 provide: {
 name: 'Aresn'
 }
}

// B组件
export default {
 inject: ['name'],
 mounted () {
 console.log(this.name); // Aresn
 }
}

<template>
 <div>
 <router-view></router-view>
 </div>
</template>
<script>
 export default {

 }
</script>
Vue cli中搭建出来的项目结构中都会有一个app.vue作为入口组件，我们可以使用这个API在上面大做文章。
<script>
 export default {
 provide () {
  return {
  app: this
  }
 },
 data () {
  return {
  userInfo: null
  }
 },
 methods: {
  getUserInfo () {
  // 这里通过 ajax 获取用户信息后，赋值给 this.userInfo，以下为伪代码
  $.ajax('/user/info', (data) => {
   this.userInfo = data;
  });
  }
 },
 mounted () {
  this.getUserInfo();
 }
 }
</script>

<template>
 <div>
 {{ app.userInfo }}
 </div>
</template>
<script>
 export default {
 inject: ['app'],
 methods: {
  changeUserInfo () {
  // 这里修改完用户数据后，通知 app.vue 更新，以下为伪代码
  $.ajax('/user/update', () => {
   // 直接通过 this.app 就可以调用 app.vue 里的方法
   this.app.getUserInfo();
  })
  }
 }
 }
</script>