Vue父子传值，兄弟传值

终于搞懂这个铁憨憨了!!!

1.父传子

①先给父组件定义个值 msg，msg的值在data中定义

<div>
<h3>父组件发送的信息为：{{msg}}</h3>
</div>

export default {
data () {
    return {
      msg:"我是父组件",
    }
  }
}

②在父组件的元素标签上自定义一个变量

<div>
<h1 :msg="msg" > </h1>
</div>

③在子组件内用props方法来接收

<div>
<h3>接收父组件发来的信息为：{{msg}}</h3>
<div>

export default {
  props:['msg'],
}

2.子传父

①在子组件 元素标签中写一个自定义事件 我写的button

<div>
    <button @click="toParent">给父亲传值</button>
</div>

②在自定义事件中使用this.$emit方法

 methods:{
    toParent(){
      this.$emit("toParent",this.msg)
   }
}

③在父组件元素标签上用 @自定义事件 = ‘父级事件’来接收

<div>
<h3 @toParent="getChildMsg"></h3>
</div>

methods:{
    getChildMsg(msg){
      this.childMsg = msg
  }
}

3.兄弟传值

兄弟组件之间就需要一个中间值，我在这里称为bus。在vue文件main.js中，我们利用 Vue.prototype.bus=new Vue() 来定义，此时我们就有了一个中间量。

①在组件1中 先定义要传的数据，在方法中用this.bus.$emit (“方法” , 传的值)

<div>
    <button @click="toBrother">给兄弟传递信息</button>
</div>

export default {
  data(){
    return{
      to:"哈喽老二,我是组件1"
    } 
  }
}

methods:{
   toBrother(){
     this.bus.$emit("toBrother",this.to)
   }
 }

②在组件2中 用$on来接收传来的值

<div>
    <h3>我来接受兄弟传的值:{{get}}</h3>
</div>

export default {
data(){
    return{
     get:""
    }
  },
  beforeCreate(){
    this.bus.$on("toBrother",msg=>{
      this.get = msg;
    })
  }
}

ok 组件传值就先到这！！内容可能有些啰嗦…哈哈哈，有问题留言 一起讨论！