Vue组件间的传参½

一、props与$emit 组件间的通信 、原则上可以实现所有组件见的参数传递
父 => 子

//父组件
<children :toChildren='toChildren' :toChildren1="toChildren1" />

//子组件
props:{
   toChildren: {
      type: Number || String || Array || object, 
       //可传递参数类型，最好明确类型。也可以type: [Number, String, Array ,Object]。
      default: () => {
        return 0  ||  ''  ||  []  ||  {}    //为了严谨，父组件没传递参数时给到的默认值。
      }
    },
  toChildren1：{} //同上
},

子 => 父

//父组件
<children @childByValue='childByValue'/>

methods:{
    childByValue(val){
      this.toChild = val 
      //可以绑定父组件传递给其他兄弟组件的参数，并实现兄弟组件传参
    }
}

//子组件
 <input type="button" @click="childButtom" value="传值到父组件">

  methods:{
       childButtom(){
           this.$emit('childByValue',this.childValue)
       }
  }

二、事件总线EventBus

EventBus简介
EventBus 又称为事件总线，在Vue中可以使用 EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以㢟都可以上下平行地通知其他组件，但也就是太方便了，所以使用不慎，就会造成难以维护的“灾难””，因此才需要Vuex作为状态管理中心，将通知的概念上升到共享状态层次

前言：eventBus可以说让人又爱又恨，正如简介中介绍的初始用的人无不大呼一声真香，它的语法的的简单直接，效果明显，无不让用它的人逐步上瘾，随之就会迎来eventBus的当头一棒，好像在说，小子你还年轻。（话不多说直接上代码）

//main.js 全局引用
Vue.prototype.$EventBus = new Vue()
//或者
import Vue from 'vue'
const EventBus = new Vue()  
//两种皆可本文使用第一种引用方式

//绑定传递
<template>
  <div>
     <button @click="checkName()">EventBus传参</button>
  </div>
</template>
<script>
export default {
  data(){
    return{ 
    }
  },
  mounted(){},
  methods:{
    checkName(){
      this.$EventBus.$emit('eventName', ' - 父组件的EventBus')
    },
  }
}
</script>

//监听
<template>
  <div>
     <p>{{childrenName}}</p>
  </div>
</template>
<script>
export default {
 data(){
    return{ 
        childrenName：''
    }
 },
 mounted(){
    //添加监听事件'eventName'
     this.$EventBus.$on('eventName',(children)=>{
         this.childrenName = children
     })
 }，
 beforeDestroy(){
    //移除监听事件'eventName'
      this.$EventBus.$off("eventName")
  }
}
</script>

重点！重点！重点！
A组件只向EventBus发送了一次事件，但B组件却进行了多次监听，EventBus容器中有很多个一模一样的事件监听器这时就会出现，事件只触发一次，但监听事件中的回调函数执行了很多次

beforeDestroy(){
    //移除监听事件"eventName"
      this.$EventBus.$off("eventName")
  }

总之，AB组件如果层级过深，或者毫无关联，需要点对点传参数，那么就用它！用它！用它！肯定爽到你''深田里敲钉桩''。