用Vue构建交互式前端应用的艺术性

2024-02-18 08:47:45

Vue 组件通信详解

Vue.js 中组件是可重用的代码块，可以组合成复杂应用程序。它们可以相互通信以共享数据和事件。本文将深入探究 Vue 中的组件通信方式，包括 Props 、$emit 、EventBus 和 事件和消息传递 。

Props：单向数据传递

Props 是子组件从父组件接收数据的属性。它们是只读的，这意味着子组件不能更改 props 的值。

示例：

<!-- 子组件 -->
<template>
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
</template>

<!-- 父组件 -->
<template>
  <MyComponent title="Hello World" message="This is a message" />
</template>

$emit：子组件触发父组件事件

$emit 是子组件向父组件发送事件的方法。事件是一种消息，可以包含数据。

示例：

<!-- 子组件 -->
export default {
  methods: {
    handleClick() {
      this.$emit('click', 'Hello World');
    }
  }
};

<!-- 父组件 -->
<template>
  <MyComponent @click="handleClick" />
</template>
<script>
methods: {
    handleClick(message) {
      console.log(message);
    }
  }
</script>

EventBus：全局事件总线

EventBus 是一种全局事件总线，允许组件在整个应用程序中通信。

示例：

<!-- 组件 -->
export default {
  beforeCreate() {
    this.$bus = new Vue();
  }
};

// 发送事件
this.$bus.$emit('click', 'Hello World');

// 接收事件
this.$bus.$on('click', (message) => {
  console.log(message);
});

事件和消息传递：灵活通信

事件和消息传递允许组件直接向其他组件发送消息。

示例：

<!-- 发送消息的组件 -->
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World');
    }
  }
};

<!-- 接收消息的组件 -->
export default {
  beforeCreate() {
    this.$bus = new Vue();
  },
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  },
  mounted() {
    this.$bus.$on('message', this.receiveMessage);
  },
  beforeDestroy() {
    this.$bus.$off('message', this.receiveMessage);
  }
};