组件间的传值

组件之间的数据共享

1、父子关系

• 父组件向子组件共享数据需要使用 自定义属性

  （数据定义在父组件，子组件用自定义属性接收父组件传来的数据）

• //父组件
  <Father :msg="message" :user="username"></Father>
  data() {
    return {
      message: 'HELLO',
      username: '小明'
    }
  }
  
  //子组件
  //(不要修改props里面的值)
  <Son>接收父组件传过来的数据{{msg}}</Son>
  
  <script>
  
    export default  {
       props:['msg','user']
    }
    
   </script>
  
  

• 子组件向父组件传值，需要使用 自定义事件

​ (子组件使用this.$emit( )触发自定义事件传递数据)

• //子组件
  <script>
  
  export default {
    data() {
      return {
        num:0
      }
    },
    methods: {
      add() {
         this.num ++
         //修改num的值时，通过$emit()触发changNum这个事件来传递num这个          变量的值
         this.$emit('changeNum',this.num)
      }
    }
  }
  
  </script>
  
  
  //父组件
  <Father @changeNum="getNum"></Father>
  
  <script>
   
  export default {
     data() {
        return {
           //接收
           getNumFromSon: 0 
        }
     },
     methods: {
       //获取子组件传递过来的数据
       getNum(val) {
          this.getNumFromSon = val
       }
     }
  }
  
  </script>
  
  

2、兄弟关系

• EventBus

• EventBus使用步骤：

  • 创建eventBus.js模块，并向外共享一个Vue的实例对象
  • 在数据发送方，引用eventBus.js文件，用**bus.$emit(‘事件名称’,要发送的数据)**方法触发自定义事件来发送数据
  • 在数据接收方，引用eventBus.js文件,用**bus.$on(‘事件名称’,事件处理函数)**方法注册一个自定义事件来接收数据

• //数据发送方
  import bus from '@/eventBus.js'
  
  <script>
   
   export default {
     data() {
       return {
         date: '2021-8-5'
       }
     },
     methods: {
        send() {
          bus.$emit('dateEvent',this.date)
        }
     }
   }
   
   </script>
   
   
   // eventBus.js文件
   import Vue from 'vue'
   //向外共享一个Vue的实例对象
   export default new Vue()
   
   
   //数据接收方
   import bus from '@/eventBus.js'
   
   <script>
   
   export default {
     data() {
       return {
         dateFrom:''
       }
     },
     created() {
        this.getDate()
     },
     methods: {
        getDate() {
          bus.$on('dateEvent',val=> {
             this.dateFrom = val
          })
        }
     }
   }
   
   </script>