Vue组件通信

Vue组件通信

Vue组件关系可分为三大类: 父子组件 兄弟组件 跨级组件, 相应的组件之间的通信也分类三大类: 父子组件通信 兄弟组件通信 跨级组件通信

自定义事件

在子组件内通过$emit触发自定义事件, 在父组件内通过$on(or v-on @)来监听自定义事件来处理子组件向父组件传递数据, 同时v-on(@)可以通过.native修饰符监听原生DOM事件

使用v-model

v-model主要用在自定义组件之间的通信, 自定义组件内部通过$emit触发一个特定的input事件, 在父组件外部使用该自定义组件时通过v-model绑定到一个data上(即v-model@input的语法糖);

v-model可用来创建自定义表单输入组件, 进行数据双向绑定, 实现方法为: 自定义组件的跟元素为input元素, 绑定其value到组件自身props, 监听input元素input change等事件, 其value改变时$emit一个input事件, 父组件使用该自定义组件时v-model绑定到一个data上, 从而实现数据双向绑定

非父子组件通信($dispatch $broadcast)

$dispatch和$broadcast是Vue 1.X提供的方法, 在Vue 2.X中已被废弃

$dispatch: 用于向父级(一级或多级)派发事件, $broadcast: 用于向下级(一级或多级)广播事件, 其事件的发送和接受采用就近原则, 第一次接收到事件后, 就会停止冒泡, 除非返回true.

Vue 2.X中被废弃原因:

  • 基于树结构的事件流晦涩难懂;
  • 在组件结构扩展过程中事件流变得愈发脆弱;
  • 不能解决兄弟组件通信问题.

中央事件总线

这是Vue 2.X中一种比较完善的解决跨组件间通信的解决方法, 采用一个空的Vue实例作为中央事件总线(bus), 事件的触发和监听分别通过bus实例的$on和$emit实现, 不过需要注意app实例生命周期中处理bus的事件监听

父链

子组件中可以通过$parent访问该组件的父实例, 父组件也可以通过$children访问其所有的子组件, 可递归访问, 通过$parent,$children直接修改父实例,子组件的数据从而实现组件通信, 该方法不推荐使用, 这会使得父子组件高度耦合, 不利于组件的扩展.

子组件索引

即采用组件ref属性来快速遍历出我们需要的子组件, ref为组件制定了一个索引名称, 父组件通过this.$refs来访问指定索引的组件实例

vuex

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 参考自vue.js 官方文档 如果你使用 Vue 进行开发的话,你不得不了解的一项就是 Vue 的组件(Compo...
    寿木阅读 385评论 0 2
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,074评论 0 29
  • 一、组件之间的通信 父组件向子组件传递 props this.$parents应急方法(包括$children) ...
    JacobMa1996阅读 502评论 0 0
  • 一、父组件向子组件通信(Prop) 在子组件里面声明 props 可以接收父组件传过来的值实现父组件向子组件的单向...
    后除阅读 296评论 0 1
  • 子组件=》父组件 vue的组件之间的通信类似angular的父子层级之间通信,父组件获取子组件数据步骤大概如下: ...
    羊烊羴阅读 343评论 0 3