props、vuex、bus(Eventbus)、事件订阅observer的使用方式及场景

前沿：在前端VUE中传参方式无非就是父传子、子传父、多个组件状态共享

---

父传子

props

传递：当子组件中在父组件中当做标签使用的时候，给子组件绑定一个自定义属性，值为需要传递的数据
接收：在子组件内部通过props进行接收，props接收的方式有2种：
①通过数组进行接收 props:["属性"]
②通过对象进行接收

props:{
     属性:{
         type:限制数据的类型,
         default:默认值,
         required:布尔值，和default二选一,
      }
}

步骤：

①在父组件中给子组件标签上添加自定义属性：

②子组件中通过props接收：
props:["len"]
③接收到的 len可以直接在标签中使用 {{len}}
注意：今后只要看到props就要想到这个属性是用来接收外部数据的。

---

子传父

$emit

①接收：当子组件在父组件中当做标签使用的时候，给当前子组件绑定一个自定义事件，值为需要接收值的函数，这个函数不允许加 ()
②传递的过程：在子组件内部通过 this.$emit("自定义事件名称",需要传递的参数)来进行数据的传递

步骤：

①父组件中给需要接收参数的子组件绑定自定义事件，值为需要接收值的函数：

methods:{
     handlerMsg(value){
           console.log(value)// 这个值是通过this.$emit()触发传来的
     }
}

②子组件中触发自定义事件：
this.$emit("handler",100);

---

非父子传递

第一种方法：通过给vue原型上添加一个公共的vue实例对象（vue实例对象上有$on()和$emit()），需要传递的一方调用$emit()，需要接收的一方调用$on()。

步骤：

①main.js中：
Vue.prototype.$observer=new Vue()
②需要传递的组件中：
this.$observer.$emit("handler",100);
③需要接收的组件中：
this.$observer.$on("handler",(value)=>{ console.log(value) });
注意：在挂载前（created）进行$on()绑定，先绑定好，再触发。

第二种方法：手动封装事件订阅observer

步骤：

①src下新建observer.js：

const eventObj={};

const $on=function (eventName,callback) {  
    if(!eventObj[eventName]){
        eventObj[eventName]=[];
    }
    eventObj[eventName].push(callback);
}
const $emit=function(eventName,params){
    if(eventObj[eventName]){
        let arr=eventObj[eventName];
        arr.forEach((cb)=>{
            cb(params);
        });
    }
}
const $off=function(eventName,callback){
    if(eventObj[eventName]){
        if(callback){
            let index=eventObj[eventName].indexOf(callback);
            eventObj[eventName].splice(index,1);
        }else{
            eventObj[eventName].length=0;
        }
    }
}
export default{
    $on,
    $emit,
    $off
}

②main.js中用手动封装的 observer替代new Vue()
import observer from "./observer.js";
Vue.prototype.$observer=observer;
③在需要传递的组件中用this.$observer.$emit()触发自定义事件：
this.$observer.$emit("customHandler","需要传递的值");
④在需要接收的组件中用this.$observer.$on()绑定自定义事件：
this.$observer.$on("customHandler",this.toggle);

第三种方法：事件总线（Eventbus）

步骤：

①先创建一个空实例：
let bus=new Vue();
②通过bus.$on()绑定自定义事件：
bus.$on("customHandler",要触发的函数);
③通过bus.$emit()来触发自定义事件：
bus.$emit("customHandler");

第四种方法：VUEX

官网API