组件通讯方式有哪些

在Vue.js中，组件之间的通讯可以通过多种方式实现，具体取决于组件之间的关系（如父子组件、兄弟组件或跨层级组件）以及通讯的需求。以下是几种常见的组件通讯方式：

1. 父子组件通讯

Props

• 父组件向子组件传递数据：通过props属性将数据从父组件传递给子组件。

<!-- 子组件 Child.vue -->
<template>
  <div>{{ message }}</div>
</template>

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

<!-- 父组件 Parent.vue -->
<template>
  <Child :message="parentMessage"></Child>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

自定义事件 (Emit)

• 子组件向父组件发送消息：使用 $emit() 方法触发一个自定义事件，并通过 v-on 或 @ 在父组件监听该事件。

<!-- 子组件 Child.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child')
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child @message="handleMessage"></Child>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  methods: {
    handleMessage(msg) {
      console.log(msg)
    }
  }
}
</script>

2. 非父子组件通讯

Event Bus

对于非父子关系的组件通讯，可以使用一个空的 Vue 实例作为事件总线(Event Bus)，来触发和监听事件。

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

然后在需要的地方引入并使用这个 EventBus。

<!-- 组件A.vue -->
<script>
import { EventBus } from './eventBus';

export default {
  mounted() {
    EventBus.$emit('id-selected', 1)
  }
}
</script>

<!-- 组件B.vue -->
<script>
import { EventBus } from './eventBus';

export default {
  mounted() {
    EventBus.$on('id-selected', id => {
      console.log(id)
    })
  }
}
</script>

Vuex

当应用规模较大时，推荐使用 Vuex 来管理全局状态，这样可以有效地进行组件间的通讯。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})

然后在组件中使用：

<!-- 组件A.vue -->
<script>
export default {
  methods: {
    incrementCount() {
      this.$store.dispatch('increment')
    }
  }
}
</script>

<!-- 组件B.vue -->
<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

3. Provide / Inject

适用于深层次嵌套的组件之间传递数据，避免了多层组件中的 props drilling。

<!-- 祖先组件 Ancestor.vue -->
<script>
export default {
  provide() {
    return {
      userName: 'John Doe'
    }
  }
}
</script>

<!-- 深层子组件 DeepChild.vue -->
<script>
export default {
  inject: ['userName'],
  created() {
    console.log(this.userName) // 输出 "John Doe"
  }
}
</script>

以上就是Vue.js中常用的几种组件通讯方法，根据实际情况选择合适的方式能够有效提升开发效率和代码维护性。