vue组件间如何实现通信

组件通信方式

在 Vue2 中，有以下几种方式实现组件通信：

1. props/$emit：父组件通过props向子组件传递数据，子组件通过$emit 事件向父组件发送消息。

2. $parent/$children：通过$parent和$children 访问父组件和子组件的实例。

3. $refs：通过$refs 获取子组件的引用，并直接调用子组件中的方法或属性。

4. eventBus：使用一个独立的 Vue 实例作为事件总线，通过$emit和$on 触发和监听自定义事件。

5. Vuex：当需要多个组件共享状态时，可以使用 Vuex 来管理全局状态。

在 Vue3 中，由于采用了 Composition API，组件通信变得更加灵活和直观。以下是几种常用的方法：

1. props/context：通过 props 将数据从父组件传递给子组件，在子组件中使用 setup 函数中的 context 对象访问父组件的属性或方法。

2. provide/inject：与 props/context 类似，provide/inject 同样用于父子组件之间的通信，但是它可以让祖先组件向所有后代组件注入数据，而不仅仅是直接后代组件。

3. ref/teleport：通过 ref 获取组件的引用，并使用 teleport 将组件挂载到指定的 DOM 节点上。

4. EventBus/Emitter：与 Vue2 类似，可以使用一个独立的 Vue 实例作为事件总线，在组件之间发送和接收自定义事件。

5. Vuex 4.x: 可以使用 Vuex 来管理全局状态，但是在 Vue3 中有了更好的支持，使用新的 API 替换了旧 API，并且提供了更好的类型安全性和开箱即用的响应式需求。

总体而言，Vue2 和 Vue3 中的组件通信方法大同小异，但是由于 Vue3 采用 Composition API，使得组件通信更加方便和灵活。

vue2 组件通信 demo

以下是其中几种常见的方式及示例代码：

1. 父子组件通信：父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件通知父组件。

父组件：

<template>
  <child-component :message="parentMessage" @update-message="updateParentMessage"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: ''
    }
  },
  methods: {
    updateParentMessage(message) {
      this.parentMessage = message
    }
  }
}
</script>

子组件：

<template>
  <div>
    {{ message }}
    <button @click="onClick">Update Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    onClick() {
      const newMessage = 'New message from child component'
      this.$emit('update-message', newMessage)
    }
  }
}
</script>

2. 兄弟组件通信：通过一个空的 Vue 实例作为中央事件总线（event bus），将其作为一个全局的事件管理器来实现兄弟组件之间的通信。

事件总线：

import Vue from 'vue'
export default new Vue()

组件 A：

<template>
  <div>
    {{ message }}
    <button @click="onClick">Update Message</button>
  </div>
</template>

<script>
import EventBus from './EventBus'

export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onClick() {
      const newMessage = 'New message from component A'
      EventBus.$emit('update-message', newMessage)
    }
  },
  created() {
    EventBus.$on('update-message', (message) => {
      this.message = message
    })
  }
}
</script>

组件 B：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import EventBus from './EventBus'

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    EventBus.$on('update-message', (message) => {
      this.message = message
    })
  }
}
</script>

3. Vuex 状态管理：通过 Vuex 实现全局状态管理，各组件共享同一个状态。

store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  }
})

组件 A：

<template>
  <div>
    {{ message }}
    <button @click="onClick">Update Message</button>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message
    }
  },
  methods: {
    onClick() {
      const newMessage = 'New message from component A'
      this.$store.commit('updateMessage', newMessage)
    }
  }
}
</script>

组件 B：

<template>
  <div>
    {{ message }}
  </div>
</template>

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

Vue3 组件通信

Vue 3 提供了多种组件通信方式，以下是其中一些常用的示例：

1. props 和 emit

父组件通过 props 向子组件传递数据，子组件通过 emit 方法向父组件发送事件。

父组件 template：

<template>
  <child-component :message="msg" @send-message="handleMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: 'Hello World'
    }
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
}
</script>

子组件 template：

<template>
  <div>
    {{ message }}
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hi Parent!');
    }
  }
}
</script>

2. provide 和 inject

provide 和 inject 可以在祖先组件提供数据，然后在后代组件中使用。

祖先组件：

<template>
  <grand-child-component></grand-child-component>
</template>

<script>
import { provide } from 'vue';

export default {
  setup() {
    const name = 'John';
    provide('name', name);

    return {};
  }
}
</script>

后代组件：

<template>
  <div>{{ name }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const name = inject('name');

    return {
      name
    }
  }
}
</script>

3. $attrs 和 $listeners

$attrs包含了父组件传递给子组件的所有属性，$listeners 包含了父组件在子组件上绑定的所有事件监听器。

子组件：

<template>
  <div v-bind="$attrs" v-on="$listeners">{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  },
}
</script>

父组件 template：

<template>
  <child-component message="Hello World" class="text-red" @click="handleClick"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Clicked!');
    }
  }
}
</script>