Vue组件间通信方式都有哪些?-Vue面试指南

当前位置:　首页>> 技术小册>> Vue面试指南

在Vue中，组件之间有多种通信方式，下面列举其中的几种：

父子组件通信：通过props和$emit实现。父组件通过props向子组件传递数据，子组件通过$emit触发事件并传递数据给父组件。

父组件代码：
```
<template>
  <div>
    <child :message="parentMessage" @child-event="handleChildEvent"></child>
  </div>
</template>

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleChildEvent(message) {
      console.log(message)
    }
  }
}
</script>
```
子组件代码：
```
<template>
  <div>
    <button @click="handleClick">Send Message to Parent</button>
  </div>
</template>

父组件代码：
```
<template>
  <div>
    <child ref="child"></child>
    <button @click="handleClick">Call Child Method</button>
  </div>
</template>

export default {
  components: {
    Child
  },
  methods: {
    handleClick() {
      this.$refs.child.childMethod('Hello from parent')
    }
  }
}
</script>
```
子组件代码：
```
<template>
  <div>
  </div>
</template>

中央事件总线代码：
```
import Vue from 'vue'

export const bus = new Vue()
```
兄弟组件代码：
```
<template>
  <div>
    <button @click="handleClick">Send Message to Brother</button>
  </div>
</template>

export default {
  methods: {
    handleClick() {
      bus.$emit('brother-event', 'Hello from brother A')
    }
  }
}
</script>
```

该分类下的相关小册推荐：

Vue.js从入门到精通(一)

vue项目构建基础入门与实战

Vue.js从入门到精通(二)

Vue原理与源码解析

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(四)

Vue3技术解密

Vue.js从入门到精通(三)

TypeScript和Vue从入门到精通(三)

vuejs组件实例与底层原理精讲

VUE组件基础与实战