Vue.js 是一种构建用户界面的渐进式框架,通过组件化开发进行模块化开发,组件之间的通信成为了一个很重要的问题。本文将详细介绍 Vue.js 组件通讯的相关知识,并提供实例代码以供参考。
父子组件的通讯
父子组件之间的通讯是最常见的场景。父组件可以向子组件传递数据,子组件可以通过事件的方式向父组件传递数据。
父组件向子组件传递数据
父组件向子组件传递数据的方式有两种:props 和 $attrs。
props
props 是一种从父组件向子组件传递数据的方式。在父组件中定义 props 就像定义一个对象一样,将属性和值作为对象的键值对传递给子组件。子组件通过 props 来接收父组件传递过来的数据。
-- -------------------- ---- ------- ---- --- --- ---------- ---------------- ------------------------------------- ----------- -------- ------ -------------- ---- ---------------------- ------ ------- - ------ - ------ - -------- ------ ------ - -- ----------- - -------------- - - --------- ---- --- --- ---------- ------- ------- -------- ----------- -------- ------ ------- - ------ - -------- ------ - - ---------
在子组件中声明 props 的时候,可以指定数据类型和默认值,代码如下:
props: { message: { type: String, default: 'Hello Vue.js' } }
$attrs
$attrs 是一种将父组件的所有属性全部传递给子组件的方式,通常用于需要将父组件的数据全部传递给子组件的场景。
-- -------------------- ---- ------- ---- --- --- ---------- ---------------- -------------- ------ -- ----------- ---- --- --- ---------- ------- -------------- -------- ----------- ---- ----- ------ -- --- - -------- ------ ------ -
子组件向父组件传递数据
子组件向父组件传递数据的方式是通过自定义事件,并通过 $emit 方法触发事件。
-- -------------------- ---- ------- ---- --- --- ---------- ------- ---------------------------------- ----------- -------- ------ ------- - -------- - ------------- - ----------------------- ------ ------- - - - --------- ---- --- --- ---------- ---------------- ----------------------- -- ----------- -------- ------ -------------- ---- ---------------------- ------ ------- - -------- - ---------------- - ----------------- -- ----- ----- - -- ----------- - -------------- - - ---------
在子组件中使用 $emit 方法触发事件,第一个参数是事件名,第二个参数是要传递的数据。父组件通过在子组件上绑定事件名和事件方法,来接收来自子组件传递过来的数据。
非父子组件的通讯
非父子组件之间的通讯,是指不同层次的组件之间进行数据传递的方式。在 Vue.js 中,非父子之间的通讯主要有两种方式:事件总线和 Vuex。
事件总线
事件总线是一种在任何地方都可以发起事件和监听事件的机制,Vue.js 中有一个全局事件总线 Vue.prototype.$bus,可以通过这个事件总线在任何组件中传递数据。
// EventBus.js import Vue from 'vue' const bus = new Vue() export default 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