揭秘Vue3组件间的通信秘诀（上）

2023-11-06 01:33:15

在现代前端开发中，组件化开发已成为一种主流范式。它使我们能够将应用程序分解成更小的、可复用的组件，从而提高开发效率和维护性。在Vue3中，组件通信是实现组件之间交互的关键。它允许组件之间传递数据和事件，从而构建出复杂、响应迅速的应用程序。

组件嵌套

在Vue3中，组件可以嵌套在其他组件中，形成父子组件关系。父子组件之间可以通过Prop和事件进行通信。

Prop通信

Prop是父子组件之间通信的主要方式。它允许父组件向子组件传递数据。要使用Prop，需要在父组件中声明Prop，并在子组件中使用它。例如：

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

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

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

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

在上面的示例中，父组件将message数据传递给了子组件。子组件通过props.message访问该数据。

事件通信

事件通信允许子组件向父组件发送事件。要使用事件通信，需要在子组件中定义事件，并在父组件中监听该事件。例如：

<!-- 子组件 -->
<template>
  <button @click="emitMessage">Send message</button>
</template>

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

<!-- 父组件 -->
<template>
  <child-component @message="receiveMessage" />
</template>

<script>
export default {
  methods: {
    receiveMessage(message) {
      console.log(message) // 输出 "Hello from child!"
    }
  }
}
</script>