vue组件传值
一、父组件向子组件传值方式:
1. 子组件中定义props,父组件向子组件props进行传值。
2. 子组件中使用this.$parent.value 获取父组件的值。
二、子组件向父组件传值方式
1. 事件传递:子组件定义this.$emit(‘transfer’,value),父组件通过<Son @transfer="getSonInfo" ></Son>,然后getSonInfo(msg)获取信息。
2. 事件监听:子组件定义this.$emit(‘func’,value),子组件使用ref标记位置<Son ref="son"></Son>,父组件通过this.$refs['son'].$on('func',(msg)=>msg)获取。
3. 直接通过children获取:在父组件中通过this.$children[1].value获取。
三、非相关组件传值
1. 使用vue bus:新建vue bus,入口bus.$emit("msg", "i am from app"); 获取方bus.$on('msg',val => {this.childMsg = val});
2. 使用消息发布与订阅:发送消息 pubsub.publishSync("sendMsg","这是A组件发布的消息!");
pubsub.subscribe("sendMsg",(e,msg)=>{console.log(e,msg);//sendMsg 这是A组件发布的消息!})