Vue.js 组件如何实现通讯?

阅读时长 7 分钟读完

Vue.js 是一种构建用户界面的渐进式框架,通过组件化开发进行模块化开发,组件之间的通信成为了一个很重要的问题。本文将详细介绍 Vue.js 组件通讯的相关知识,并提供实例代码以供参考。

父子组件的通讯

父子组件之间的通讯是最常见的场景。父组件可以向子组件传递数据,子组件可以通过事件的方式向父组件传递数据。

父组件向子组件传递数据

父组件向子组件传递数据的方式有两种:props 和 $attrs。

props

props 是一种从父组件向子组件传递数据的方式。在父组件中定义 props 就像定义一个对象一样,将属性和值作为对象的键值对传递给子组件。子组件通过 props 来接收父组件传递过来的数据。

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

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

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

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

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

在子组件中声明 props 的时候,可以指定数据类型和默认值,代码如下:

$attrs

$attrs 是一种将父组件的所有属性全部传递给子组件的方式,通常用于需要将父组件的数据全部传递给子组件的场景。

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

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

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

子组件向父组件传递数据

子组件向父组件传递数据的方式是通过自定义事件,并通过 $emit 方法触发事件。

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

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

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

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

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

在子组件中使用 $emit 方法触发事件,第一个参数是事件名,第二个参数是要传递的数据。父组件通过在子组件上绑定事件名和事件方法,来接收来自子组件传递过来的数据。

非父子组件的通讯

非父子组件之间的通讯,是指不同层次的组件之间进行数据传递的方式。在 Vue.js 中,非父子之间的通讯主要有两种方式:事件总线和 Vuex。

事件总线

事件总线是一种在任何地方都可以发起事件和监听事件的机制,Vue.js 中有一个全局事件总线 Vue.prototype.$bus,可以通过这个事件总线在任何组件中传递数据。

在需要传递数据的组件中引入 EventBus.js,并在组件中通过 $emit 触发一个事件。在接收数据的组件中绑定 $on 方法监听事件,代码如下:

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

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

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

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

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它使用了一个集中式的存储管理所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

在 Vuex 中,数据流是严格单向的,在 Vue.js 应用中的所有组件中,只有唯一的一个 store,并且 store 中的数据可以被任何组件访问和修改。

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

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

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

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

在需要修改数据的组件中,通过 $store.commit 方法触发 mutation 来更新 store 中的数据。在需要访问数据的组件中,通过 $store.state.message 来获取数据,代码如下:

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

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

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

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

总结

本文介绍了 Vue.js 组件通讯的几种方式,包括父子组件通讯和非父子组件通讯。在实际开发中,可以根据不同的场景选择不同的通讯方式来传递数据,从而更好地满足复杂应用程序的需求。

参考链接

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a9f54a48841e9894617e51

纠错
反馈