vue组件通讯的几种方式(全面)

组件通讯的几种方式(全面总结)

  • 1 组件通讯的意义是什么?
    • 1.1 vue框架开发的基本原理(了解)
    • 1.2 组件通讯的意义?
  • 2 组件通讯类型和各自实现原理?(传统型)
    • 2.1 常见的组件通讯类型以及常见的通讯方式
    • 2.2 父组件到子组件(父传子props)
    • 2.4 父子组件(provide和inject)
    • 2.5 子组件到父组件(子传父$emit和events方法)
    • 2.6 父子组件,兄弟组件,隔代组件(中央事件处理总线 $bus和 $on)

1 组件通讯的意义是什么?

1.1 vue框架开发的基本原理(了解)

①数据驱动视图 ②自底层向上增量开发 ③支持模块化开发 ④基于MVVM模式开发

1.2 组件通讯的意义?

①当应用逐渐扩大,每一个功能点又都是相对独立的组件,此时各功能(组件)就避免不了进行交互,例如:首页的“欢迎xx用户的登录”,数据源可以直接来自源于登录组件的from表单信息。
②简而言之,组件通讯最大的优势就是可以实现数据共享,从而减少一定的内存消耗,数据可以来源于一次请求,缓存在本地内存,其他组件可以使用。

2 组件通讯类型和各自实现原理?(传统型)

2.1 常见的组件通讯类型以及常见的通讯方式

通讯类型①:父传子 ②子传父 ③非父子组件(兄弟组件,隔代组件)

通讯方式:①props和$emit(常用于父子组件) ② $attrs和 $listeners ③provide和inject ④v-model ⑤ $parent和 $childrens ⑥vuex

2.2 父组件到子组件(父传子props)

思考:如何在子组件child(user.vue)中拿到parent(ceshi.vue)组件中的users数组

父组件parent:
vue组件通讯的几种方式(全面)_第1张图片
子组件child
vue组件通讯的几种方式(全面)_第2张图片
理解:

在父组件中引入子组件,并且挂载到父组件中。在子组件中将组件的name设置为Users,对应(ceshi.vue)文件中的components对象下的name值。在子组件中通过props(可以接受数组或者是对象)对象的形式,将父组件中users数组传递过来,以父组件数组:{type:数据类型,必加属性}
(必加属性)上文意思是users数据必须有属性值。也就是父组件传过来的users数组必须要有属性值。

2.4 父子组件(provide和inject)

此种方法,有一个好处就是无论子组件的嵌套层数有多深,只要父级提供(provide)了属性,子组件jnject[‘属性’]注入到当前组件,就可以拿到父组件的值。

2.5 子组件到父组件(子传父$emit和events方法)

(基本思路)子组件中绑定事件,通过事件触发this.$emit(‘自定义属性名’,要传递的数据)方法;父组件中引入子组件通过事件接受e,来拿取数据。

vue组件通讯的几种方式(全面)_第3张图片

子组件
vue组件通讯的几种方式(全面)_第4张图片
父组件
vue组件通讯的几种方式(全面)_第5张图片

2.6 父子组件,兄弟组件,隔代组件(中央事件处理总线 $bus和 $on)

(基本思路)①通过new一个空的vue实例,抛出该实例 ②在想进行通讯的组件中引入那个空vue实例,并且使用事件来触发Bus.$emit(‘自定义属性名’,要传递的数据) 向目标组件发送数据 ③在目标组件中通过Bus.美元符on(‘传递过来的属性名’,将数据赋值给当前data中的属性)

A组件
vue组件通讯的几种方式(全面)_第6张图片

B组件
vue组件通讯的几种方式(全面)_第7张图片

C组件
vue组件通讯的几种方式(全面)_第8张图片
》》》》》》》》》阅读过程中,有任何疑问,请联系我,谢谢!

你可能感兴趣的:(vue.js,vue.js,前端,javascript)