2022-04-11——vue组件传值(8种方法)----props、$emit()、手动封装事件订阅observer、事件总线(Eventbus)、vuex、亲兄弟传值、provide/inj...

1、父传子

传递:当子组件中在父组件中当做标签使用的时候,给子组件绑定一个自定义属性,值为需要传递的数据
接收:在子组件内部通过props进行接收,props接收的方式有2种:
①通过数组进行接收 props:["属性"]
②通过对象进行接收
props:{
(1)type:限制数据的类型
(2)default:默认值
(3)required:布尔值,和default二选一
}
步骤:
①在父组件中给子组件标签上添加自定义属性:
②子组件中通过props接收:props:["custom"]
③接收到的custom可以直接在标签中使用 {{custom}}
注意:今后只要看到props就要想到这个属性是用来接收外部数据的。

2、子传父

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

步骤:
①父组件中给需要接收参数的子组件绑定自定义事件,值为需要接收值的函数:




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

3、非父子传递

第一种方法:通过给vue原型上添加一个公共的vue实例对象(vue实例对象上有emit()),需要传递的一方调用on()。

步骤:
①main.js中:Vue.prototype.$observer=new Vue();

②需要传递的组件中:this.emit("handler",100);

③需要接收的组件中:
this.on("handler",(value)=>{
console.log(value)
});

注意:在挂载前(created)进行$on()绑定,先绑定好,再触发。

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

步骤:
①src下新建observer.js:

const eventList = {};

const $on = function(eventName, callback) {
    if (!eventList[eventName]) {
        eventList[eventName] = [];
    }
    eventList[eventName].push(callback);
}

const $emit = function(eventName, params) {
    if (eventList[eventName]) {
        let arr = eventList[eventName];
        arr.forEach((cb) => {
            cb(params);
        });
    }
}

const $off = function(eventName, callback) {
    if (eventList[eventName]) {
        if (callback) {
            let index = eventList[eventName].indexOf(callback);
            eventList[eventName].splice(index, 1);
        } else {
            eventList[eventName].length = 0;
        }
    }
}

export default {
    $on,
    $emit,
    $off
}

②main.js中用手动封装的observer替代new Vue()
import observer from "./observer.js";
Vue.prototype.observer.observer.observer.observer.$on("customHandler",this.toggle);
⑤清除自定义事件

beforeDestroy() {
    this.$observer.$off('customHandler')
},

第三种方法:事件总线(Eventbus)

步骤:
①先创建一个空实例:
let bus=new Vue();
②通过bus.on("customHandler",要触发的函数);
③通过bus.emit("customHandler");

第四种方法:vuex

注:如果是亲兄弟:(父传子和子传父)

步骤:
①父组件中声明data数据 state:true ,将state通过props传给其中一个子组件:


props:show

此时show的值随着state的变化而变化

②再通过另一个子组件去改变父组件的state:
标签上绑定自定义事件:

再在子组件内部通过emit("customHandler");

provide / inject(提供/注入)跨组件传值,其实就是父传子

provide / inject:依赖注入。可以实现跨组件传值,数据的流向只能是向下传递,就是大范围有效的props
provide:这个配置项必须要在父级进行使用,用来定义后代组件所需要的一些属性和方法。

provide(){
    return{
    
    }
}

inject:这个配置项必须在后代组件中使用,用来获取根组件定义的跨组件传值的数据。

 inject:{
    key:{
        from:"父组件名称",
        default:默认值
    }
}

你可能感兴趣的:(2022-04-11——vue组件传值(8种方法)----props、$emit()、手动封装事件订阅observer、事件总线(Eventbus)、vuex、亲兄弟传值、provide/inj...)