vue中组件通信的八种方式（值得收藏！）

// section父组件
<template>
 <div class="section">
 <com-article :articles="articleList"></com-article>
 </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
 name: 'HelloWorld',
 components: { comArticle },
 data() {
 return {
 articleList: ['红楼梦', '西游记', '三国演义']
 }
 }
}
</script>

// 子组件 article.vue
<template>
 <div>
 <span v-for="(item, index) in articles" :key="index">{{item}}</span>
 </div>
</template>

<script>
export default {
 props: ['articles']
}
</script>

// 父组件中
<template>
 <div class="section">
 <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
 <p>{{currentIndex}}</p>
 </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
 name: 'HelloWorld',
 components: { comArticle },
 data() {
 return {
 currentIndex: -1,
 articleList: ['红楼梦', '西游记', '三国演义']
 }
 },
 methods: {
 onEmitIndex(idx) {
 this.currentIndex = idx
 }
 }
}
</script>

<template>
 <div>
 <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
 </div>
</template>

<script>
export default {
 props: ['articles'],
 methods: {
 emitIndex(index) {
 this.$emit('onEmitIndex', index)
 }
 }
}
</script>

// 父组件中
<template>
 <div class="hello_world">
 <div>{{msg}}</div>
 <com-a></com-a>
 <button @click="changeA">点击改变子组件值</button>
 </div>
</template>

<script>
import ComA from './test/comA.vue'
export default {
 name: 'HelloWorld',
 components: { ComA },
 data() {
 return {
  msg: 'Welcome'
 }
 },

 methods: {
 changeA() {
  // 获取到子组件A
  this.$children[0].messageA = 'this is new value'
 }
 }
}
</script>

// 子组件中
<template>
 <div class="com_a">
 <span>{{messageA}}</span>
 <p>获取父组件的值为: {{parentVal}}</p>
 </div>
</template>

<script>
export default {
 data() {
 return {
  messageA: 'this is old'
 }
 },
 computed:{
 parentVal(){
  return this.$parent.msg;
 }
 }
}
</script>

// A.vue

<template>
 <div>
	<comB></comB>
 </div>
</template>

<script>
 import comB from '../components/test/comB.vue'
 export default {
 name: "A",
 provide: {
  for: "demo"
 },
 components:{
  comB
 }
 }
</script>

// B.vue

<template>
 <div>
 {{demo}}
 <comC></comC>
 </div>
</template>

<script>
 import comC from '../components/test/comC.vue'
 export default {
 name: "B",
 inject: ['for'],
 data() {
  return {
  demo: this.for
  }
 },
 components: {
  comC
 }
 }
</script>

// C.vue
<template>
 <div>
 {{demo}}
 </div>
</template>

<script>
 export default {
 name: "C",
 inject: ['for'],
 data() {
  return {
  demo: this.for
  }
 }
 }
</script>

// 子组件 A.vue

export default {
 data () {
 return {
  name: 'Vue.js'
 }
 },
 methods: {
 sayHello () {
  console.log('hello')
 }
 }
}

// 父组件 app.vue

<template>
 <component-a ref="comA"></component-a>
</template>
<script>
 export default {
 mounted () {
  const comA = this.$refs.comA;
  console.log(comA.name); // Vue.js
  comA.sayHello(); // hello
 }
 }
</script>

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

<template>
 <div>
  <show-num-com></show-num-com>
  <addition-num-com></addition-num-com>
 </div>
</template>

<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {
 components: { showNumCom, additionNumCom }
}
</script>

// addtionNum.vue 中发送事件

<template>
 <div>
  <button @click="additionHandle">+加法器</button>  
 </div>
</template>

<script>
import {EventBus} from './event-bus.js'
console.log(EventBus)
export default {
 data(){
  return{
   num:1
  }
 },

 methods:{
  additionHandle(){
   EventBus.$emit('addition', {
    num:this.num++
   })
  }
 }
}
</script>

// showNum.vue 中接收事件

<template>
 <div>计算和: {{count}}</div>
</template>

<script>
import { EventBus } from './event-bus.js'
export default {
 data() {
  return {
   count: 0
  }
 },

 mounted() {
  EventBus.$on('addition', param => {
   this.count = this.count + param.num;
  })
 }
}
</script>

import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})

// 父组件

<template>
 <div id="app">
  <ChildA/>
  <ChildB/>
 </div>
</template>

<script>
 import ChildA from './components/ChildA' // 导入A组件
 import ChildB from './components/ChildB' // 导入B组件

 export default {
  name: 'App',
  components: {ChildA, ChildB} // 注册A、B组件
 }
</script>

// 子组件childA

<template>
 <div id="childA">
  <h1>我是A组件</h1>
  <button @click="transform">点我让B组件接收到数据</button>
  <p>因为你点了B，所以我的信息发生了变化：{{BMessage}}</p>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    AMessage: 'Hello，B组件，我是A组件'
   }
  },
  computed: {
   BMessage() {
    // 这里存储从store里获取的B组件的数据
    return this.$store.state.BMsg
   }
  },
  methods: {
   transform() {
    // 触发receiveAMsg，将A组件的数据存放到store里去
    this.$store.commit('receiveAMsg', {
     AMsg: this.AMessage
    })
   }
  }
 }
</script>

// 子组件 childB

<template>
 <div id="childB">
  <h1>我是B组件</h1>
  <button @click="transform">点我让A组件接收到数据</button>
  <p>因为你点了A，所以我的信息发生了变化：{{AMessage}}</p>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    BMessage: 'Hello，A组件，我是B组件'
   }
  },
  computed: {
   AMessage() {
    // 这里存储从store里获取的A组件的数据
    return this.$store.state.AMsg
   }
  },
  methods: {
   transform() {
    // 触发receiveBMsg，将B组件的数据存放到store里去
    this.$store.commit('receiveBMsg', {
     BMsg: this.BMessage
    })
   }
  }
 }
</script>

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
 // 初始化A和B组件的数据，等待获取
 AMsg: '',
 BMsg: ''
}

const mutations = {
 receiveAMsg(state, payload) {
  // 将A组件的数据存放于state
  state.AMsg = payload.AMsg
 },
 receiveBMsg(state, payload) {
  // 将B组件的数据存放于state
  state.BMsg = payload.BMsg
 }
}

export default new Vuex.Store({
 state,
 mutations
})

// app.vue
// index.vue

<template>
 <div>
  <child-com1
   :name="name"
   :age="age"
   :gender="gender"
   :height="height"
   title="程序员成长指北"
  ></child-com1>
 </div>
</template>
<script>
const childCom1 = () => import("./childCom1.vue");
export default {
 components: { childCom1 },
 data() {
  return {
   name: "zhang",
   age: "18",
   gender: "女",
   height: "158"
  };
 }
};
</script>

// childCom1.vue

<template class="border">
 <div>
  <p>name: {{ name}}</p>
  <p>childCom1的$attrs: {{ $attrs }}</p>
  <child-com2 v-bind="$attrs"></child-com2>
 </div>
</template>
<script>
const childCom2 = () => import("./childCom2.vue");
export default {
 components: {
  childCom2
 },
 inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
 props: {
  name: String // name作为props属性绑定
 },
 created() {
  console.log(this.$attrs);
   // { "age": "18", "gender": "女", "height": "158", "title": "程序员成长指北" }
 }
};
</script>

// childCom2.vue

<template>
 <div class="border">
  <p>age: {{ age}}</p>
  <p>childCom2: {{ $attrs }}</p>
 </div>
</template>
<script>

export default {
 inheritAttrs: false,
 props: {
  age: String
 },
 created() {
  console.log(this.$attrs); 
  // { "gender": "女", "height": "158", "title": "程序员成长指北" }
 }
};
</script>