Vue数据传递

1.父传子

//父亲的信息
export default {
  data(){
    return{
      message:'123112',
      userinfo:{name:'wsc',age:18},
     }
  },

//Left为子组件，将信息传给子组件

<template>
  <div class="app-container">
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left :msg="message" :user="userinfo"></Left>
      
    </div>
  </div>
</template>

//儿子定义接收的自定义属性
export default {
  props:['msg','user']
}

//在儿子组件中调用
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <p>message的值为{{msg}}</p>
    <p>姓名为{{user.name}}</p>
    <p>年龄为{{user.age}}</p>
  </div>
</template>

 

2.子传父

//子组件
methods:{
    add(){
      this.count++
　　　　//将值传给numChange
      this.$emit('numChange',this.count)
    }
  }

<template>
  <div class="app-container">
    <h1>App 根组件--{{countFromSon}}</h1>
    <p>{{userinfo}}</p>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left :msg="message" :user="userinfo"></Left>
　　　　//通过@numChange接收子组件传过来的值，并赋给getNewCount方法
      <Right @numChange='getNewCount'></Right>
    </div>
  </div>
</template>

//通过getNewCount拿到值并传给父组件

export default {
  data(){
    return{
      message:'123112',
      userinfo:{name:'wsc',age:18},
      countFromSon:0
    }
  },
  components:{
    Left,
    Right
  },
  methods:{
    getNewCount(val){
        this.countFromSon=val
    }
  }
}

 

3.兄弟传递

（1）创建eventBus.js，向外共享Vue实例对象

import Vue from "vue"

export default new Vue()

（2）在发送数据方，调用eventBus.$emit('事件名'，'要发送的数据')方法触发自定义事件。

methods:{
    send(){
      eventBus.$emit('share',this.str)
    }
  }

（3）在接收方，调用eventBus.$on('事件名'，（值）=>{})注册自定义事件

created() {
      eventBus.$on('share',(val)=>{
          this.msgFromLeft=val
      })
    }

 

//Left组件
<script>
import eventBus from "@/components/eventBus";
export default {
  props:['msg','user'],
  data(){
    return{
      str:`黑云压城城欲摧`
    }
  },
  methods:{
    send(){
      eventBus.$emit('share',this.str)
    }
  }
}
</script>


//Right组件

<script>
import eventBus from "@/components/eventBus";
export default {
  data(){
    return{
      count:0,
      msgFromLeft:''
    }
  },
  methods:{
    add(){
      this.count++
      this.$emit('numChange',this.count)
    }
  },
    created() {
      eventBus.$on('share',(val)=>{
          this.msgFromLeft=val
      })
    }
}
</script>