组件通信Vue.js

子组件如何获取父组件中的数据？父组件如何得知子组件的数据变更？如果是更加复杂的组件关系呢？在组件间传递数据的操作，称为组件通信。组件通信

• 父组件向子组件传值

• 子组件向父组件传值

• 非父子组件传值

• 其他通信方式父组件向子组件传值

组件通信父组件向子组件传值

• 通过子组件的 props 选项接收父组件的传值。

注意：props 不要与 data 存在同名属性。父组件向子组件传值

• 父组件设置方式如下：

 

 

Props 命名规则

• 建议 prop 命名使用 camelCase，父组件绑定时使用 kebab-case

 

 

单向数据流

父组件向子组件传值父子组件间的所有 prop 都是单向下行绑定

的。单向数据流如果子组件要处理 prop 数据，应当存储在 data 中后操作。

 

Props 类型

父组件向子组件传值

Props 类型

• Prop 可以设置类型检查，这时需要将 props 更改为一个带有验

证需求的对象，并指定对应类型。

 

 • prop 还可以同时指定多个类型，通过数组方式保存即可

 

Props 验证

• 当 prop 需要设置多种规则时，可以将 prop 的值设置为选项对象。

• 之前的类型检测功能通过 type 选项设置

 

 required 用于设置数据为必填项。

 default 用于给可选项指定默认值，当父组件未传递数据时生效。

注意：当默认值为数组或对象时，必须为工厂函数返回的形式 

Props 验证

• validator 用于给传入的 prop 设置校验函数，return 值为false 时 Vue.js 会发出警告。

 注意：验证函数中无法使用实例的 data、methods 等功能。

非 Props 属性

• 当父组件给子组件设置了属性，但此属性在 props 中不存在，这 时会自动绑定到子组件的根元素上。

 

如果组件根元素已经存在了对应属性，则会替换组件内部的值。

• class 与 style 是例外，当内外都设置时，属性会自动合并。

如果不希望继承父组件设置的属性，可以设置 inheritAttrs: false，但只适用于普通属性，class 与 style 不受影响。

子组件向父组件传值

组件通信子向父传值需要通过自定义事件实现。子组件向父组件传值

• 商品为子组件，购物车为父组件，父组件需要统计商品个数，就需要在子组件个数变化时传值给父组件。

 

 

 

子组件数据变化时，通过 $emit() 触发自定义事件。

• 自定义事件名称建议使用 kebab-case。

 父组件监听子组件的自定义事件，并设置处理程序。

 

子组件向父组件传值

• 子组件触发事件时可以向父组件传值。

 

父组件在监听事件时需要接收子组件传递的数据。 

父组件在监听事件时需要接收子组件传递的数据 

 

组件与 v-model

• v-model 用于组件时，需要通过 props 与自定义事件实现

 

 

非父子组件传值

组件通信非父子组件指的是兄弟组件或完全无关的两

个组件。• 兄弟组件传值

非父子组件传值

• EventBus

• 其他传值方式兄弟组件传值

非父子组件传值兄弟组件可以通过父组件进行数据中转

 

 

EventBus

非父子组件传值当组件嵌套关系复杂时，根据组件关系传值

会较为繁琐。组件为了数据中转，data 中会存在许多与当

前组件功能无关的数据。EventBus

• EventBus （事件总线）是一个独立的事件中心，用于管理不同组

件间的传值操作。

• EventBus 通过一个新的 Vue 实例来管理组件传值操作，组件通

过给实例注册事件、调用事件来实现数据传递。

• 发送数据的组件触发 bus 事件，接收的组件给 bus 注册对应事

件

 

 给 bus 注册对应事件通过 $on() 操作。

最后创建根实例执行代码即可。 

 

其他通信方式

• $root

• $refs$root

其他通信方式$root

• $root 用于访问当前组件树根实例，设置简单的 Vue 应用时可以

通过此方式进行组件传值。

 

 

 

除了 $root , Vue.js 中还提供了 $parent 与 $children 用于

便捷访问父子组件。

 

$refs 用于获取设置了 ref 属性的 HTML 标签或子组件。$refs

• 给普通 HTML 标签设置 ref 属性，$refs 可以获取 DOM 对象。