杭州上城区建设局网站,个人接装修活,一做特卖的网站,建设银行网站诚聘英才文章目录 vue2-组件通信1. 为什么需要组件通信2. props传递数据3. $emit触发自定义事件4.ref5. EventBus6. p a r e n t 和 parent和 parent和root7. a t t r s 和 attrs和 attrs和listeners8. provide和inject9. vuex10. 总结 vue2-组件通信
1. 为什么需要组件通信
在VUE中… 文章目录 vue2-组件通信1. 为什么需要组件通信2. props传递数据3. $emit触发自定义事件4.ref5. EventBus6. p a r e n t 和 parent和 parent和root7. a t t r s 和 attrs和 attrs和listeners8. provide和inject9. vuex10. 总结 vue2-组件通信
1. 为什么需要组件通信
在VUE中组件是比较核心的功能每个.vue都可以视为一个组件且每个组件都有独立的作用域相互之间无法直接进行数据共享但是我们又需要组件之间进行数据共享就需要一套能支持组件之间通信的方法组件通信一般有四种情况
父子组件通信兄弟组件通信孙子组件通信无关系组件通信
vue2通信的方式一共有8种
propsemitparent和rootattrs和listenersprovide和injecteventBusrefvuex
2. props传递数据
props适合父组件传递数据给子组件子组件设置props属性定义接收父组件传递过来的参数父组件在使用子组件的标签中通过字面量来传递值子组件Child.vue
props:{name:String,age:{type:Number, defaule:8,require:true}
}父组件Father.vue
Child nametom age14 /3. $emit触发自定义事件
$emit一般适用于子组件像父组件传值子组件通过 e m i t 触发自定义事件 emit触发自定义事件 emit触发自定义事件emit第二个参数为传递的值父组件在子组件的标签中添加监听自定事件并获取到参数子组件Child.vue
$emit(childEvent,childData)父组件Father.vue
Child childEventdoChildEvent($event)4.ref
一般用于父组件获取子组件的值父组件在使用子组件的时候设置ref父组件通过设置的ref获取到子组件的实例从而获取子组件的数据子组件Child.vue
data(){return {name:sdds}
}父组件Father.vue
Child refchild/
this.$ref.child.name//获取到了name的值5. EventBus
事件总线一般用于兄弟组件之间的传值创建一个中央事件总线EventsBus谁都可以往里面注册事件也都可以监听里面的事件从而实现相互传值兄弟组件通过$emit触发自定义事件加入到事件总线第二个参数为传值另一个兄弟组件通过$on监听自定义事件兄弟组件Brother1.vue
import {EventBus } from event-bus.js
this.EventBus.$emit(event,data)兄弟组件Brother2.vue
import {EventBus } from event-bus.js
this.EventBus.on(event,handler)6. p a r e n t 和 parent和 parent和root
一般适用于兄弟组件之间的通信通信依赖于共同的祖先 p a r e n t 或者 parent或者 parent或者root作为中间人搭线通信兄弟组件Brother1.vue
this.$parent.emit(add)兄弟组件Brother2.vue
this.$parent.on(add,handler)7. a t t r s 和 attrs和 attrs和listeners
适用于祖先传值给子孙设置批量向下传属性 a t t r s 和 attrs和 attrs和listeners包含了父级作用域中不作为prop被识别的特性绑定
//Child
div{{$attrs.name}}/div
//parent
Child namesd/8. provide和inject
适用于祖先传递给子孙祖先组件定义proved属性返回传递的值子孙组件通过inject接收组件传递过来的值
//祖先
provide(){return{name:tom}
}
//子孙
inject:[name]9. vuex 适用于复杂的组件数据共享终极解决方案 Vuex作用相当于一个用来存储共享变量的容器 一共有4大属性
state 用来存放数据的地方getter可以增加一个getter派生状态用来获得共享变量的值mutations保存修改state的方法actionsactions适用于异步请求在请求结束后使用mutations同步修改state
10. 总结
传值对象适用的方法父子传值props(父-子) $emit(子-父) ref(父-子)兄弟传值 p a r e n t 和 parent和 parent和rootEventBus祖孙传值 a t t r s 和 attrs和 attrs和listenersprovide和inject万能传值vuex
