Vue组件通信

作者: 寿木 | 来源:发表于2018-03-05 12:42 被阅读31次

参考自vue.js 官方文档

如果你使用 Vue 进行开发的话,你不得不了解的一项就是 Vue 的组件(Component)。

组件是 Vue 中一项很强大的功能,它可以扩展 Html 元素,封装可重用代码,减少工作量。

在使用组件开发时的一大问题就是组件之间如何进行通信??如果组件之间不能通信的话,那么它将大大减少的开发效率以及工作乐趣。

Vue 中的组件通信分为 父子组件通信兄弟组件通信 这两大类。

父子组件通信

在 Vue 中,父子组件的关系可以理解为 props向下传递事件向上传递

组件之间的作用域是孤立的,无法直接引用其他组件之内的数据。

如果子组件想要使用父组件内的数据应该如何去做呢??

子组件需要通过 props 来声明预期的数据,而父组件通过直接在子组件内传值的方式将数据传给子组件。

父子组件传值 展示效果

如果你想要动态传值,只需要使用v-bind绑定所传的值。

动态绑定 结果同步更新

兄弟组件通信

有人可能发现为什么父子组件通信中只写了父组件将数据传递给子组件的方法,却没有写如何在子组件中将数据传递给父组件??

因为在子组件中,如果想要把数据传递给父组件,需要用到的方法和兄弟组件通信的方法是一样的。

这个时候就需要用到 Vue 的自定义事件 $on(eventName)$emit(eventName) 来进行监听和触发事件。

监听触发事件

相关文章

  • vue组件之间通信

    vue 组件之间通信 vue组件之间通信方式: 1.父组件通过props向下传数据给子组件,子组件通过$emit事...

  • 【Vue】组件通信(任意通信)

    本节所需的基础知识: 【Vue】组件通信(父传子props) 【Vue】组件通信(子传父$emit) 任意组件相互...

  • vue 组件通信方式 ,父子、隔代、兄弟 三类通信,六种方法

    Vue 组件间通信只要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面分别介绍每种通信方式且会说...

  • Vue相关知识点

    1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...

  • Vue如何实现组件通信?

    Vue组件通信的三种情况: 父子通信 爷孙通信 兄弟通信 父子通信:父组件使用Prop向子组件传递数据,子组件通过...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • Vue组件通信

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

  • vue组件间通信的一些实用方法(VUE2.x)

    vue组件间通信的一些实用方法(VUE2.x) 一、父子组件间通信 常用的父子组件通信方法,一般涉及props和$...

  • vue组件通信(传值)

    1.父子通信 1.父组件(parent.vue) 子组件(child.vue) 2.子父通信 1.子组件(chil...

  • Vue组件通信

    总体来说,Vue中组件之间的通信场景如下图: 可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。 1. 自定义...

网友评论

    本文标题:Vue组件通信

    本文链接:https://www.haomeiwen.com/subject/snwcfftx.html