深入理解Vue 3 组件通信之《红楼梦》剧情演绎

前端

2023-09-12 01:26:48

Vue 3 组件通信：走进红楼梦的大观园

Vue.js 框架的核心在于组件，它们之间的通信对于构建健壮、模块化的应用程序至关重要。Vue 3 为组件通信提供了多种方式，包括 props、events 和 provide/inject。

贾府大家庭：组件层级结构

《红楼梦》中的贾府就像 Vue 中的组件层级结构。家族成员之间的关系错综复杂，就像组件之间的嵌套和交互。

贾宝玉与林黛玉：Props 数据传递

贾宝玉将玉佩赠予林黛玉，就像 Vue 中的 props，它传递数据，实现单向流向。组件通过 props 向子组件传递数据，以供使用。

贾母与贾政：Events 事件通信

当贾母有需求时，她会派人传话给贾政。这类似于 Vue 中的事件通信，其中组件通过 emit() 触发事件，传递数据，而父组件通过 on() 监听事件，做出响应。

贾政与王熙凤：Provide/Inject 依赖注入

贾政掌握着贾府的财政大权，而王熙凤作为管家需要向他汇报。这与 Vue 中的 provide/inject 类似，它允许组件向子组件提供依赖项，子组件通过 inject 注入这些依赖项。

实现 Vue 3 组件通信

以下是如何使用代码示例实现这些通信方式：

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

<script>
export default {
  data() {
    return {
      message: 'Hello world!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
  <button @click="updateParentMessage">Update parent message</button>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateParentMessage() {
      this.$emit('update', 'New message from child')
    }
  }
}
</script>