Vue 组件通信详解：解构经典面试难题

2023-10-24 11:45:29

Vue组件通信指南：深入剖析面试要点

组件通信概述

Vue.js 是构建现代web应用程序的首选框架之一。其强大的组件化特性使开发人员能够创建可重用和可维护的代码。组件通信是 Vue 中至关重要的一个方面，它使组件之间能够传递数据和事件。

发布订阅：事件驱动的通信

发布订阅是一种基于事件的通信方式。一个组件（发布者）可以发布事件，另一个组件（订阅者）可以监听该事件。当事件触发时，订阅者将收到通知并执行相应的操作。

// 发布者组件
<template>
  <button @click="emitEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('my-event');
    }
  }
};
</script>

// 订阅者组件
<template>
  <p>{{ message }}</p>
</template>

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

事件总线：全局通信中心

事件总线是一种特殊的组件，它作为一个全局事件中心，允许任意组件发布和监听事件。

// 事件总线组件
<template></template>

<script>
export default {
  data() {
    return {
      eventBus: new Vue()
    }
  }
};
</script>

// 发布者组件
<template>
  <button @click="emitEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$eventBus.$emit('my-event');
    }
  }
};
</script>

// 订阅者组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.$eventBus.$on('my-event', (data) => {
      this.message = data;
    });
  }
};
</script>

子父通信：向上和向下数据传递

子父通信允许子组件访问父组件的属性和方法，而父组件可以使用 props 向子组件传递数据。

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: '我是父组件传递的数据'
    }
  }
};
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

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

提供注入：跨层级传递数据

提供注入是一种强大的机制，允许父组件向其所有子组件和孙组件提供数据和方法。

// 父组件
<template>
  <child-component></child-component>
</template>

<script>
export default {
  provide() {
    return {
      message: '我是父组件提供的数据'
    }
  }
};
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

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