vue2和vue3中的组件间通信知识点总结

vue2中组件间通信

在Vue2中，组件间的通信是构建复杂应用的关键。以下是一些常见的Vue2组件间通信方式，并附有详细说明和示例：

1. Props（父子组件通信）

Props是Vue中用于父子组件通信的一种机制。父组件通过属性（Props）将数据传递给子组件。

Vue2中的组件间通信方式多种多样，选择哪种方式取决于具体的应用场景和需求。在实际开发中，应根据组件间的关系和通信的复杂度来选择最合适的通信方式。

这种方式通常用于祖先组件向子孙组件传递数据或事件监听器

• 示例：

  <!-- 父组件 -->  
  <template>  <div>  <child-component :message="parentMessage"></child-component>  </div>  
  </template>  <script>  
  import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  },  data() {  return {  parentMessage: 'Hello from Parent'  };  }  
  };  
  </script>  <!-- 子组件 -->  
  <template>  <div>  <p>{{ message }}</p>  </div>  
  </template>  <script>  
  export default {  props: ['message']  
  };  
  </script>

  2. $emit（子父组件通信）

  子组件通过$emit触发自定义事件，父组件监听并响应这些事件，从而实现子父组件间的通信。

• 示例：

  <!-- 子组件 -->  
  <template>  <button @click="sendMessage">Send Message to Parent</button>  
  </template>  <script>  
  export default {  methods: {  sendMessage() {  this.$emit('custom-event', 'Hello from Child');  }  }  
  };  
  </script>  <!-- 父组件 -->  
  <template>  <div>  <child-component @custom-event="handleCustomEvent"></child-component>  </div>  
  </template>  <script>  
  import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  },  methods: {  handleCustomEvent(message) {  console.log('Received message from child:', message);  }  }  
  };  
  </script>

  3. EventBus（兄弟组件通信）

  通过创建一个中央事件总线EventBus，兄弟组件可以通过emit触发自定义事件，并通过on监听这些事件，从而实现兄弟组件间的通信。

• EventBus文件：

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

• 兄弟组件1：

  <template>  <button @click="sendMessage">Send Message to Brother</button>  
  </template>  <script>  
  import { EventBus } from './EventBus.js';  export default {  methods: {  sendMessage() {  EventBus.$emit('custom-event', 'Hello from Brother1');  }  }  
  };  
  </script>

• 兄弟组件2：

  <template>  <p>{{ message }}</p>  
  </template>  <script>  
  import { EventBus } from './EventBus.js';  export default {  data() {  return {  message: ''  };  },  created() {  EventBus.$on('custom-event', (message) => {  this.message = message;  });  }  
  };  
  </script>

  4. Vuex（全局状态管理）

  Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。使用Vuex可以实现任意组件之间的通信。

• 安装Vuex：

  npm install vuex --save

• 创建Store文件：

  // store/index.js  
  import Vue from 'vue';  
  import Vuex from 'vuex';  Vue.use(Vuex);  export default new Vuex.Store({  state: {  globalMessage: ''  },  mutations: {  setGlobalMessage(state, message) {  state.globalMessage = message;  }  }  
  });

• 使用Vuex的组件：

  <!-- 组件1 -->  
  <template>  <button @click="sendMessage">Send Message to Anywhere</button>  
  </template>  <script>  
  export default {  methods: {  sendMessage() {  this.$store.commit('setGlobalMessage', 'Hello from Vuex');  }  }  
  };  
  </script>  <!-- 组件2 -->  
  <template>  <p>{{ globalMessage }}</p>  
  </template>  <script>  
  export default {  computed: {  globalMessage() {  return this.$store.state.globalMessage;  }  }  
  };  
  </script>

  5. Provide/Inject（祖先与后代组件通信）

  Provide/Inject是Vue2.2.0+新增的API，用于祖先组件向其所有后代组件提供数据/方法，后代组件通过inject选项来接收。

• 祖先组件：

  <template>  <div>  <descendant-component></descendant-component>  </div>  
  </template>  <script>  
  import { provide } from 'vue';  
  import { globalMessage } from './symbols.js';  export default {  setup() {  provide(globalMessage, 'Hello from Ancestor');  }  
  };  
  </script>

• 后代组件：

  <template>  <div>  <p>{{ foo }}</p>  </div>  
  </template>  <script>  
  export default {  inject: ['foo']  
  };  
  </script>

  6. $refs

  refs是一个对象，持有注册过ref特性的所有DOM元素和组件实例。父组件可以通过refs主动获取子组件的实例，从而直接调用子组件的方法或访问子组件的数据。

  <!-- 父组件 -->  
  <template>  <div>  <child-component ref="child"></child-component>  </div>  
  </template>  <script>  
  import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  },  mounted() {  const child = this.$refs.child;  console.log(child.str); // 获取子组件的数据  child.fn('调用了子组件的方法'); // 调用子组件的方法  }  
  };  
  </script>  <!-- 子组件 -->  
  <template>  <input type="text" />  
  </template>  <script>  
  export default {  data() {  return {  str: '我是数据'  };  },  methods: {  fn(e) {  console.log(e);  }  }  
  };  
  </script>

  7. parent或root

  通过parent或root，组件可以访问其父组件或根组件的实例，从而进行通信。但这种方式通常不推荐使用，因为它破坏了组件的封装性，使组件间的依赖关系变得复杂。

  8. attrs与listeners

• **attrs∗∗：包含了父级作用域中不作为prop被识别（且获取）的特性绑定（class和style除外）。当组件没有声明某个prop时，这个prop会作为一个特性（attribute）绑定到组件的根元素上，并可以通过attrs进行访问。
• **listeners∗∗：包含了父级作用域中的v−on事件监听器。这些监听器可以在组件内部通过listeners进行访问，并可以绑定到组件内部的元素上。

vue3中组件间通信

在Vue3中，组件间的通信方式多种多样，以下是几种常见的通信方式及示例：

一、props（父组件向子组件传递数据）

• 说明：父组件通过props属性将数据传递给子组件。在子组件中，可以使用defineProps来接收这些数据。
• 示例：

  <!-- 父组件 -->  
  <template>  <div>  <h1>我是父组件</h1>  <child :name="name" age="12"></child>  </div>  
  </template>  <script setup lang="ts">  
  import child from './child.vue'  
  import { ref } from 'vue'  
  const name = ref('父亲名字')  
  </script>  <!-- 子组件 -->  
  <template>  <div>  <h1>我是子组件</h1>  <p>我收到了父组件的数据: {{ name }}</p>  <p>{{ props.age }}</p>  </div>  
  </template>  <script setup lang="ts">  
  const props = defineProps(["name", "age"]);  
  </script>

  二、自定义事件（子组件向父组件发送消息）

• 说明：子组件通过$emit触发自定义事件，并传递数据给父组件。父组件通过监听这些事件来接收数据。
• 示例：

  <!-- 父组件 -->  
  <template>  <div>  <h1>我是父组件</h1>  <child @mimi="tingmimi"></child>  <p>我听到了子组件的秘密: {{ msg }}</p>  </div>  
  </template>  <script setup lang="ts">  
  import child from './child.vue'  
  import { ref } from 'vue'  
  let msg = ref('还没听到秘密')  
  const tingmimi = function(message: any) {  msg.value = message  
  }  
  </script>  <!-- 子组件 -->  
  <template>  <div>  <h1>我是子组件</h1>  <button @click="saymimi">点我给父组件说我的秘密</button>  </div>  
  </template>  <script setup lang="ts">  
  let $emit = defineEmits(['mimi'])  
  const saymimi = function() {  $emit('mimi', '是邓紫棋的我的秘密啦')  
  }  
  </script>

  三、mitt全局事件总线（兄弟组件间通信）

• 说明：使用mitt库创建一个全局事件总线，允许任意组件间进行通信。
• 示例：

  # 安装mitt  
  npm i mitt

  // 在utils文件创建mitt.ts文件  
  import mitt from 'mitt'  
  const $bus = mitt()  
  export default $bus

  <!-- 子组件1 -->  
  <template>  <div>  <h1>我是子组件1</h1>  <p>我收到了来自兄弟的信息: {{ message }}</p>  </div>  
  </template>  <script setup lang="ts">  
  import $bus from '../utils/mitt'  
  import { ref } from 'vue'  
  let message = ref('还不知道呢')  
  $bus.on('mimi', (msg: any) => {  message.value = msg  
  })  
  </script>  <!-- 子组件2 -->  
  <template>  <div>  <h1>我是子组件2</h1>  <button @click="sayborder">点我给兄弟发秘密</button>  </div>  
  </template>  <script setup lang="ts">  
  import $bus from '../utils/mitt'  
  const sayborder = function() {  $bus.emit('mimi', { mimi: "遗产全都给我了" })  
  }  
  </script>

  四、v-model（父子组件数据双向绑定）

• 说明：v-model可以用于父子组件间的数据双向绑定。在子组件中，需要定义props和emits来配合v-model的使用。
• 示例：

  <!-- 父组件 -->  
  <template>  <div>  <h1>我是父组件</h1>  <p>我的财产: {{ money1 }}</p>  <child v-model:money="money1"></child>  </div>  
  </template>  <script setup lang="ts">  
  import { ref } from 'vue'  
  import child from './child.vue'  
  let money1 = ref(122000)  
  </script>  <!-- 子组件 -->  
  <template>  <div>  <h1>我是子组件</h1>  <input type="text" v-model="value.money">  <p>父亲的钱: {{ money }}</p>  <button @click="sayborder()">点我偷掉父亲的钱</button>  </div>  
  </template>  <script setup lang="ts">  
  const value = defineProps(['money'])  
  const $emit = defineEmits(['update:money'])  
  const sayborder = function() {  $emit('update:money', value.money - 200)  
  }  
  </script>

  五、useAttrs（获取组件的属性）

• 说明：useAttrs可以用于获取组件上未被props声明的属性。
• 示例：

  <!-- 父组件 -->  
  <template>  <div>  <h1>我是父组件</h1>  <child :money="money" data="extraData"></child>  </div>  
  </template>  <script setup lang="ts">  
  import { ref } from 'vue'  
  import child from './child.vue'  
  const money = ref(122000)  
  </script>  <!-- 子组件 -->  
  <template>  <div>  <h1>我是子组件</h1>  <p>收到了父亲的财产: {{ money }}</p>  <p>额外数据: {{ extraData }}</p>  </div>  
  </template>  <script setup lang="ts">  
  import { useAttrs } from 'vue'  
  let attrs = useAttrs()  
  let { money, data: extraData } = attrs  
  </script>

  六、ref与$parent（父组件访问子组件实例，子组件访问父组件实例）

• 说明：使用ref可以在父组件中获取子组件的实例，从而直接调用子组件的方法或访问其数据。同时，子组件可以通过$parent访问父组件的实例。
• 示例（仅展示父组件访问子组件）：

  <!-- 父组件 -->  
  <template>  <div>  <h1>我是父组件</h1>  <child ref="mychildref"></child>  <button @click="accessChild">访问子组件</button>  </div>  
  </template>  <script setup lang="ts">  
  import child from "./child.vue"  
  import { ref } from "vue"  
  const mychildref = ref(null)  
  const accessChild = () => {  console.log(mychildref.value.someChildMethod()) // 假设子组件有一个someChildMethod方法  
  }  
  </script>  <!-- 子组件 -->  
  <template>  <div>  <h1>我是子组件</h1>  </div>  
  </template>  <script setup lang="ts">  
  const someChildMethod = () => {  return "我是子组件的方法"  
  }  
  defineExpose({  someChildMethod // 对外暴露方法，以便父组件访问  
  })  
  </script>

  七、Provide/Inject（跨层级组件通信）

• 说明：Provide/Inject是Vue3中新增的一种组件通信方式，用于实现跨层级的组件通信。祖先组件通过provide提供数据，后代组件通过inject获取数据。
• 示例：

  <!-- 祖先组件 -->  
  <template>  <div>  <h1>我是祖先组件</h1>  <parent></parent>  </div>  
  </template>  <script setup lang="ts">  
  import { provide } from 'vue'  
  import parent from './parent.vue'  
  provide('sharedData', '这是共享的数据')  
  </script>  <!-- 父组件 -->  
  <template>  <div>  <h1>我是父组件</h1>  <child></child>  </div>  
  </template>  <script setup lang="ts">  
  import child from './child.vue'  
  </script>  <!-- 子组件 -->  
  <template>  <div>  <h1>我是子组件