vue组件通信
props
适用的场景是:父子组件通信
-
父组件给子组件传递数据(函数):本质是子组件给父组件传递数据
-
父组件给子组件传递数据(非函数):本质是父组件给子组件传递数据
自定义事件
适用的场景:子组件给父组件传递数据
o n , on, on,emit
全局事件总线:$bus
适用的场景是:全能
Vue.prototype.$bus=this
pubsub-js
适用的场景是:全能
React框架中使用比较多
发布与订阅
Vuex
适用的场景是:全能
插槽
适用的场景是:父子组件通信–(一般结构)
默认插槽,具名插槽和作用域插槽
事件注意事项
1.原生DOM:button可以绑定系统事件,click单击事件等
2.组件标签:把自定义事件变为原生DOM,加上.native
3.v-model:主要结合表单元素一起使用,可以通过value与input实现v-model,v-model实现父子组件数据同步,实现原理是:value与input实现的,可以实现父子组件通信
4.sync修饰符:组件通信的一种,可以实现父子组件数据同步,:money.sync代表父组件给子组件传递props,给当前组件传递了一个自定义事件
5. a t t r s , attrs, attrs,listeners:都能获取到父组件给子组件传递的props和自定义事件
-
a t t r s 可 以 接 受 父 组 件 给 子 组 件 的 数 据 , 类 似 于 p r o p s , 对 于 子 组 件 , 父 组 件 给 的 数 据 可 以 利 用 p r o p s 接 受 , 如 果 子 组 件 通 过 p r o p s 接 受 的 属 性 , 在 attrs可以接受父组件给子组件的数据,类似于props,对于子组件,父组件给的数据可以利用props接受,如果子组件通过props接受的属性,在 attrs可以接受父组件给子组件的数据,类似于props,对于子组件,父组件给的数据可以利用props接受,如果子组件通过props接受的属性,在attrs属性中获取不到的!!!!
-
$listeners也是组件实例自身的属性,能获取到父组件给子组件传递的自定义事件
6. c h i n d r e n , chindren, chindren,parent:
- $chindren返回的是一个数组,返回全部的子组件
- $parent返回的是一个数组,返回全部的父组件
7.作用域插槽slot:可以实现父子组件通信(子组件决定不了结构,需要父组件传递一个template结构)
- 默认插槽
- 具名插槽
- 作用域插槽