Vue.js 设计模式解析 —— 组件间通信

Vue.js 是一个流行的前端框架，它具有清晰简洁的 API 和良好的组件化架构。然而随着应用的复杂度增加，组件之间的通信也变得复杂和困难。本文将介绍 Vue.js 中的组件间通信设计模式，包括父子组件通信、兄弟组件通信、跨级组件通信和非父子组件通信。

父子组件通信

父组件和子组件的通信是最基础和常用的组件通信方式。父组件可以通过 props 向子组件传递数据，子组件可以通过 $emit 触发事件向父组件传递数据。

props

当父组件需要向子组件传递数据时，可以通过 props 属性来实现。子组件通过 props 接收父组件传递的数据并在模板中使用。以下是一个父组件向子组件传递数据的示例：

---- --- ---
----------
  -----
    ------------- ------------------------------
  ------
-----------
--------
------ ----------- ---- ---------------
------ ------- -
  ----------- -
    -----------
  --
  ---- -- -
    ------ -
      ------ ------ ------
    -
  -
-
---------

---- --- ---
----------
  ------- ----- --------
-----------
--------
------ ------- -
  ------ -
    ------ ------
  -
-
---------

在父组件中，通过将 title 通过 props 传递给子组件，在子组件中通过 {{ title }} 显示父组件传递的数据。

$emit

当子组件需要向父组件传递数据时，可以通过 $emit 方法来触发自定义事件，并传递数据。父组件可以通过监听子组件的事件来接收子组件传递的数据。以下是一个子组件向父组件传递数据的示例：

---- --- ---
----------
  -----
    ------------- -------------------------------------------------
    -- ----- --
  ------
-----------
--------
------ ----------- ---- ---------------
------ ------- -
  ----------- -
    -----------
  --
  ---- -- -
    ------ -
      ------ ------ ------
    -
  --
  -------- -
    ----------------- ---------- -
      ---------- - --------
    -
  -
-
---------

---- --- ---
----------
  ---- --------------------------- -----------
-----------
--------
------ ------- -
  -------- -
    ----------- -- -
      -------------------------- --- -------
    -
  -
-
---------

在子组件中，通过 $emit 触发 change-title 事件，并传递 'Hi World' 作为新的 title。在父组件中，通过监听 change-title 事件，并使用参数 newTitle 更新 title 字段。

兄弟组件通信

兄弟组件通信是指在同一层级的两个组件之间进行通信，这种通信方式非常常见。Vue.js 提供了多种方式来实现兄弟组件通信。

通过父组件

当两个兄弟组件都有一个共同的父组件时，可以通过父组件来传递数据。兄弟组件通过 props 接收父组件传递的数据，并通过 $emit 触发事件来通知父组件更新数据。

---- --- ---
----------
  -----
    --------------- -------------- ---------------------------------------------------
    --------------- --------------------------------
  ------
-----------
--------
------ ------------ ---- ----------------
------ ------------ ---- ----------------
------ ------- -
  ----------- -
    -------------
    ------------
  --
  ---- -- -
    ------ -
      ------ ------ ------
    -
  --
  -------- -
    ----------------- ------- -
      ---------- - -----
    -
  -
-
---------

---- --- - ---
----------
  -----
    ------ ----------- -------------- ----------------------
    ------- --------------------------- --------------
  ------
-----------
--------
------ ------- -
  ------ -
    ------ ------
  --
  -------- -
    ----------- -- -
      -------------------------- -----------
    --
    ------------ ------- -
      -------------------------- -------------------
    -
  -
-
---------

---- --- - ---
----------
  ------- ----- --------
-----------
--------
------ ------- -
  ------ -
    ------ ------
  -
-
---------

在父组件中，共享了 title 字段，并分别将 title 和 handleTitleChange 通过 props 和事件传递给子组件 1。在子组件 1 中，通过 props 接收 title 并在 input 和 handleClick 中触发 change-title 事件来更新 title。在子组件 2 中，通过 props 接收 title 并显示在模板中。

使用 Vue.$parent 和 Vue.$children

Vue.js 的每个实例都有一个 $parent 属性，可以用来访问它的父级实例。$children 属性是一个数组，包含它的所有子实例。通过这两个属性，可以在兄弟组件之间进行通信。

---- --- ---
----------
  -----
    ---------------------------------
    ---------------------------------
  ------
-----------
--------
------ ------------ ---- ----------------
------ ------------ ---- ----------------
------ ------- -
  ----------- -
    -------------
    ------------
  -
-
---------

---- --- - ---
----------
  -----
    ------ ----------- -------------- ----------------------
    ------- --------------------------- --------------
  ------
-----------
--------
------ ------- -
  --------- -
    ----- -- -
      ------ ------------------
    -
  --
  -------- -
    ----------- -- -
      ------------------ - ----------
    --
    ------------ ------- -
      ------------------ - ------------------
    -
  -
-
---------

---- --- - ---
----------
  ------- ----- --------
-----------
--------
------ ------- -
  --------- -
    ----- -- -
      ------ ------------------
    -
  -
-
---------

在子组件 1 和 2 中，使用 Vue.$parent 访问它们的父组件，并通过 this.$parent.title 设置和获取 title 数据。需要注意的是，使用 Vue.$parent 和 Vue.$children 只是在一些特殊情况下的最后解决方案，应避免过度使用。

跨级组件通信

跨级组件通信是指两个组件不处于同一级别，也不是父子关系，而是通过其他组件进行通信。Vue.js 支持使用 provide 和 inject，在祖先组件中提供数据，在后代组件中注入数据，从而实现跨级组件通信。

---- ---- ---
----------
  -----
    -----------------------------
  ------
-----------
--------
------ ----------- ---- ---------------
------ ------- -
  ----------- -
    -----------
  --
  ------- -- -
    ------ -
      ------ ------ ------
    -
  -
-
---------

---- --- ---
----------
  ------- ----- --------
-----------
--------
------ ------- -
  ------- ---------
-
---------

在祖先组件中，通过 provide 方法来提供 title 数据。在子组件中，通过 inject 来注入 title 数据。需要注意的是，provide 和 inject 绑定并不是反应性的。这意味着，如果提供的数据在祖先组件中更新，注入的组件不会自动更新。

非父子组件通信

非父子组件通信是指没有明确的关系的两个组件之间进行通信。Vue.js 支持使用事件总线、Vuex 状态管理和 Vue Router。

事件总线

事件总线是指在Vue.js的全局事件系统中，通过 $on、$off 和 $emit 方法来实现任意两个组件之间的通信。创建一个 EventBus，可以在任何组件内引入它，并使用 $on 和 $emit 方法，实现组件间通信。

-- -----------
------ --- ---- -----
------ ------- --- -----

-- -- -
------ -------- ---- ------------
------ ------- -
  -------- -
    ----------- -- -
      ------------------------------ --- -------
    -
  -
-

-- -- -
------ -------- ---- ------------
------ ------- -
  ---- -- -
    ------ -
      ------ ------ ------
    -
  --
  ------- -- -
    ---------------------------- -------- -- -
      ---------- - --------
    --
  -
-

在这个例子中，创建了一个 EventBus，用于组件间通信。在组件 1 中通过 EventBus.$emit 触发 change-title 事件，并传递 'Hi World' 作为新的 title；在组件 2 中通过 EventBus.$on 监听 change-title 事件，并在回调函数中更新 title 字段。

Vuex 状态管理

Vuex 是 Vue.js 的状态管理库，它使用集中式 Store 来管理应用的所有状态，并提供了一些 API 来实现组件间通信。

-- --------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
  ------ -
    ------ ------ ------
  --
  ---------- -
    ----------- ------- --------- -
      ----------- - --------
    -
  -
--
------ ------- -----

-- -- -
------ - ------------ - ---- ------
------ ------- -
  -------- -
    ---------------------------------
    ----------- -- -
      -------------------- -------
    -
  -
-

-- -- -
------ - -------- - ---- ------
------ ------- -
  --------- -------------------
-

在这个例子中，通过创建一个 Vuex Store，用于管理应用的状态。在组件 1 中通过 mapMutations 将 changeTitle 映射为组件的一个方法，并在 handleClick 中调用此方法来更新 title。在组件 2 中通过 mapState 将 title 映射为组件的一个计算属性，并在模板中使用它。

Vue Router

Vue Router 是 Vue.js 的官方路由库，它提供了一些 API 来实现路由组件之间的通信。

-- -- -
------ ------- -
  -------- -
    ----------- -- -
      -------------------
        ----- --------------
        ------ - ------ --- ------ -
      --
    -
  -
-

-- -- -
------ ------- -
  ------- -- -
    ----- ----- - -----------------------
    ---------- - -----
  --
  ---- -- -
    ------ -
      ------ --
    -
  -
-

在这个例子中，通过在组件 1 中使用路由跳转向组件 2 传递 title 数据，并使用 $route.query 来获取 title 数据，并在组件 2 中使用 title 数据。

总结

本文介绍了 Vue.js 中四种不同的组件间通信设计模式，包括父子组件通信、兄弟组件通信、跨级组件通信和非父子组件通信。Vue.js 的组件通信非常灵活多样，可以根据实际情况选择最适合的方式进行通信。在如何选择通信方式的时候，需要根据具体需求权衡优缺点，找到最佳的解决方案。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6486db5248841e989457271c

阅读全文

猜你喜欢

  • SSE 如何实现客户端与服务器的验证与认证？

    在前端开发中，对于客户端与服务器之间的认证和验证是非常重要的问题。其中一个常见的解决方案是使用 Server-Sent Events（SSE）。 本文将介绍 SSE 的基础知识，以及如何实现 SSE ...

    1 年前
  • CSS Grid 布局实践中的坑与技巧

    CSS Grid 布局是一种全新的布局模式，它能够轻松地创建复杂的布局结构，甚至可以替代传统的 float 和 position 布局方法。不过在实践中，CSS Grid 布局也存在不少坑点需要注意。

    1 年前
  • 十个令你头疼 React SPA 应用性能优化技巧及解决方案

    React 作为一款前端框架已经得到了广泛的应用，但是在实际的应用中，我们经常会碰到一些性能问题。所以，在这篇文章中，我们将讨论十个令你头疼的 React SPA 应用性能优化技巧及解决方案，以便帮助...

    1 年前
  • Babel 编译过程中如何处理 ES2017 Object Rest/Spread Property

    在现代前端开发中，JavaScript 已成为主流开发语言，随着各种新标准的推出，开发人员常常需要更新自己的知识体系以跟上时代步伐。其中，ES2017 中的 Object Rest/Spread Pr...

    1 年前
  • Material Design 风格的分页控件实现技巧

    简介 在前端开发中， Pagination （分页）控件是很常见的一种交互组件，在实际开发中，我们通常需要根据具体的业务需求来实现功能和样式。而在这篇文章中，我们将会介绍如何利用 Material D...

    1 年前
  • Enzyme：Java 开发中的常见异常及解决方法

    在 Java 开发过程中，经常会出现各种异常情况。如果我们能够很好地处理这些异常，不仅可以提高代码的健壮性，也可以减少程序出错的概率。本文将介绍 Java 开发中常见的异常，并提供解决方法。

    1 年前
  • 如何使用 PM2 对 Node.js 应用程序进行升级和回滚？

    前言 在开发阶段，我们会频繁地对我们的程序进行修改、测试、部署等操作。而这些操作都需要我们对程序进行升级或回滚。本文将介绍如何使用 PM2 对 Node.js 应用程序进行升级和回滚。

    1 年前
  • 如何使用 Serverless 实现图像处理？

    在当今的云计算时代，Serverless 已经成为了一种非常受欢迎的架构模式。它能够让开发者更加专注于代码的编写而不必担心其他基础架构的配置，同时也能够大幅度降低运行成本。

    1 年前
  • Deno 中如何使用 WebSocket 实现多人在线游戏

    前言 WebSocket 是一种实现了持久化连接的协议，它可以在客户端与服务器之间创建双向通信的通道。基于 WebSocket 协议，我们可以轻松地实现多人在线游戏，而 Deno 是一个能够真正实现 ...

    1 年前
  • ES7 新特性：Object.is() 方法详解

    在研究一门编程语言时，了解语言的新特性和更新是至关重要的。在 ES7 中，带来了许多新的特性，其中一个重要的特性是 Object.is() 方法。Object.is() 方法可以用于比较两个值是否相等...

    1 年前
  • Koa2中使用Docker进行容器及环境管理

    近年来，Docker 已经成为了前端开发和部署的重要工具，它可以有效地解决一系列开发和运维中的问题。在 Koa2 中使用 Docker 进行容器及环境管理，可以让我们更加方便地管理项目的开发、测试、部...

    1 年前
  • Cypress 测试实践：如何优化测试性能

    在前端开发中，测试是保证质量的重要步骤。Cypress 是一种流行的前端自动化测试工具，能够为开发者提供不仅仅质量测试的信息，而且性能和可靠性方面的信息。 在测试代码的编写和执行过程中，性能往往成为瓶...

    1 年前
  • 使用 Less 编写强大的 CSS 文件

    CSS 是前端开发中不可或缺的一部分，负责定义页面的样式和布局。随着网页的复杂度增加以及 CSS 文件的规模扩大，维护和优化代码变得越来越困难。为了提高 CSS 文件的可读性、可维护性和可扩展性，我们...

    1 年前
  • 使用 React Native 的 FlatList 组件构建高效列表视图

    在移动应用开发中，列表视图是最常见的 UI 元素之一。由于列表数据的数量通常较大，很容易导致性能问题。为了解决这个问题，React Native 提供了一个称为 FlatList 的组件，可以帮助我们...

    1 年前
  • Redis 使用的线程模型及其优化

    Redis 使用的线程模型及其优化 Redis 是一个高性能的内存键值存储系统，常用于缓存、消息队列、计数器等场景。Redis 的高性能和可靠性离不开其优秀的线程模型和优化策略。

    1 年前
  • 在 Socket.io 中使用 Redis 实现多服务器共享数据

    背景 在实际项目中，我们经常会遇到多服务器共享数据的需求，即多台服务器之间需要实现数据共享，以保证数据的一致性和实时性。在前端中，常常使用 Socket.io 技术实现实时通信功能，而在多服务器的情况...

    1 年前
  • Mocha 测试中出现 “Error: Cannot find module ‘sinon’” 该怎么办？

    在进行前端单元测试时，使用 Mocha 和 Sinon 是很常见的做法。然而，在使用 Mocha 进行测试时，常常会出现以下错误信息：Error: Cannot find module ‘sinon’...

    1 年前
  • 如何使用 Web Components 实现 Markdown 编辑器？

    Web Components 是一种支持编写自定义元素的技术，是前端开发中十分重要的一部分之一。本文将介绍如何使用 Web Components 实现一个简单的 Markdown 编辑器。

    1 年前
  • ES9 异步迭代器的基本使用方法

    JavaScript的异步编程一直是一个热门的话题，ES9将异步编程推向了一个新的高度。ES9中新增了异步迭代器，使得在处理异步数据流的过程中变得更加自然和丝滑。本文将介绍ES9异步迭代器的基本使用方...

    1 年前
  • Next.js 问题解决：服务端渲染时 CSS 不生效

    在使用 Next.js 进行服务端渲染的过程中，可能会出现 CSS 在客户端渲染中生效，但在服务端渲染中不生效的情况。这个问题在实际开发中非常常见。本文将介绍解决这个问题的一些方法，希望能为开发者提供...

    1 年前

相关推荐

    暂无文章