Vue组件传值

vue组件传值

一、父组件向子组件传值方式：

1. 子组件中定义props，父组件向子组件props进行传值。

props传值

2. 子组件中使用this.$parent.value 获取父组件的值。

this.$parent.value 

二、子组件向父组件传值方式

1. 事件传递：子组件定义this.$emit(‘transfer’,value),父组件通过，然后getSonInfo(msg)获取信息。

事件传递 

2. 事件监听：子组件定义this.$emit(‘func’,value),子组件使用ref标记位置，父组件通过this.$refs['son'].$on('func',(msg)=>msg)获取。

事件监听

3. 直接通过children获取：在父组件中通过this.$children[1].value获取。

直接通过children获取

三、非相关组件传值

1. 使用vue bus：新建vue bus，入口bus.$emit("msg", "i am from app"); 获取方bus.$on('msg',val => {this.childMsg = val});

export vue bus

bus 传值

2. 使用消息发布与订阅：发送消息 pubsub.publishSync("sendMsg","这是A组件发布的消息！");

pubsub.subscribe("sendMsg",(e,msg)=>{console.log(e,msg);//sendMsg 这是A组件发布的消息！})

Vue组件传参的五种方式参考

本文github地址