你不知道得Vue组件通信的六种方式，详解解析！！！

Vue是一款流行的前端框架，它提供了多种方式来实现组件之间的通信。在这篇博客中，我们将介绍六种Vue组件通信的方式，并提供相应的代码示例。

1. Props / $emit

这是Vue中最常用的一种组件通信方式。父组件通过props向子组件传递数据，子组件通过$emit事件向父组件发送消息。以下是一个简单的示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage" @childEvent="handleChildEvent"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleChildEvent(message) {
      console.log(message)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('childEvent', 'Hello from child')
    }
  }
}
</script>

在这个示例中，父组件通过props向子组件传递了一个名为message的属性。子组件通过$emit事件向父组件发送了一个名为childEvent的事件。

2. $parent / $children

使用 $parent 和 $children 属性可以访问组件树中的其他组件。但这种方式并不推荐，因为它会使组件之间的耦合度太高。

以下是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  methods: {
    sendMessage() {
      this.$children[0].handleMessage('Hello from parent')
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from child'
    }
  },
  methods: {
    handleMessage(message) {
      this.message = message
    }
  }
}
</script>

在这个示例中，父组件使用了$children属性来访问子组件，并调用了子组件的handleMessage方法。

3. Event Bus

使用事件总线（Event Bus）可以在组件之间进行解耦的通信。在主Vue实例中创建一个事件总线，然后在需要通信的组件中使用$emit来发送事件，再使用$on来监听事件。以下是一个示例：

<!-- EventBus.js -->
import Vue from 'vue'
export const EventBus = new Vue()

<!-- 父组件 -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import { EventBus } from './EventBus.js'
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('parentEvent', 'Hello from parent')
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
import { EventBus } from './EventBus.js'
export default {
  data() {
    return {
      message: 'Hello from child'
    }
  },
  mounted() {
    EventBus.$on('parentEvent', (message) => {
      this.message = message
    })
  }
}
</script>

在这个示例中，我们创建了一个名为EventBus的事件总线。父组件通过EventBus.$emit方法向事件总线发送了一个名为parentEvent的事件。子组件通过EventBus.$on方法在事件总线上监听parentEvent事件。

4. Provide / Inject

使用Provide / Inject可以在组件树中进行依赖注入。父组件通过provide提供数据，然后子组件通过inject来注入数据。以下是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
export default {
  provide: {
    message: 'Hello from parent'
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

在这个示例中，我们在父组件中使用provide来提供一个名为message的属性。子组件通过inject来注入message属性。

5. Vuex

Vuex是Vue的状态管理库，可以方便地实现组件之间的通信。在Vuex中，我们可以定义一个全局的状态，并在需要通信的组件中使用mapState、mapGetters、mapMutations和mapActions等方法来访问这些状态。以下是一个示例：

<!-- store.js -->
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  }
})

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: mapState(['message'])
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  methods: mapMutations(['updateMessage'])
}
</script>

在这个示例中，我们定义了一个名为message的全局状态，并在父组件中使用mapState来访问这个状态。子组件中使用了mapMutations来调用updateMessage方法来更新message状态。

6. $refs

最后一种Vue组件通信的方式是使用$refs属性。可以在父组件中通过$refs属性来访问子组件中的方法和属性。以下是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$refs.child.handleMessage('Hello from parent')
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from child'
    }
  },
  methods: {
    handleMessage(message) {
      this.message = message
    }
  }
}
</script>

在这个示例中，父组件使用了$refs属性来访问子组件，然后调用了子组件的handleMessage方法。

结论

这篇博客介绍了六种Vue组件通信的方式：Props / $emit、$parent / $children、事件总线、Provide/Inject、Vuex和$refs。每种方式都有其优缺点，我们可以根据具体的场景选择合适的方式来实现组件之间的通信。