vue组件之间的传值

一、父组件向子组件传值

父组件向子组件传值

<son psMsg="父组件传给子组件的值：我是爸爸值"></son>

子组件接受父组件传来的值psMsg

<script>
  export default {
    props:['psMsg'],//此处接受父组件传来psMsg值
  }
</script>

子组件使用父组件传来的值psMsg

<p>子组件接收到内容：{{ psMsg }}</p>

二、子组件向父组件传值

子组件设置传递的值

<button @click="setUser">传值</button>

<script>
  export default {
    methods:{
      setUser:function(){
        this.$emit('transfer',"我是儿子值")//将值绑定到transfer上传递过去
      }
    }
  }
  </script>

父组件接受子组件传来的值

export default {
    methods:{
      getUser(msg){
        this.username= msg
      }
    }
  }

父组件使用子组件传来的值

<son @transfer="getUser"></son>  <!--绑定自定义事件transfer-->

三、兄弟组件间传值

兄弟组件间的传值（非父子组件间的传值）总的来说可分为三步

1，首先创建一个事件总线，例如bus，作为一个通讯的桥梁；

2，在需要传值的组件中，通过emit触发一个自定义事件，并传递参数；

3，在接收数据的组件中，通过on监听自定义事件，并处理传递过来的参数；

具体详细的步骤，可以移步到此链接上：

vue兄弟组件间的传值通俗易懂