Vue组件跨层级通信

谁借莪１个温暖的怀抱￠ 2023-06-02 10:39 237阅读 0赞

正常组件间通信  
　　父->子组件 是通过属性传递  
　　子->父组件 是通过this.$emit()传递  
　　this.$emit()返回的是this,如果需要一些值 可使用callback方式传递

**provide 和 inject**

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，  
　　不论组件层次有多深，并在起上下游关系成立的时间里始终生效。  
　　provide 和 inject 绑定并不是可响应的。这是刻意为之的。  
　　然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

**provide提供数据,多层子组件 向上层寻找,只要找到 就不在向上层寻找了.**  
**　　inject 向子组件注入数据**

使用方式

第一种方式(传递对象,使用字符串数组接收)

// 父级组件提供 'foo'
    var Provider = {
    provide: {
    foo: 'bar'
    },
    // ...
    }
    
    // 子组件注入 'foo'
    var Child = {
    inject: ['foo'],
    created () {
    console.log(this.foo) // => "bar"
    }
    // ...
    }

第二种方式(传递返回对象的函数, 使用对象接收)

provide() {
    return {
    // 2.6.0 版本之前 通常传递this. 但这样的话 会传递很多用不到的属性
    theme: {
    color: 'xxx' //如果传入可响应的数据,这里的属性还是可响应的
    }
    };
    }
    inject: {
    //这里可以换成其它名字
    theme: {
    from: "theme", // 数据来源
    default: () => ({}) //降级情况下使用的 value
    //可以是 普通值
    //可以是 对非原始值使用一个工厂方法
    }
    }
    //正常子组件
    this.theme //即可访问
    //子组件是函数式组件的使用方式
    injections.theme.color

Vue.observable( object )  
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。  
可以作为最小化的跨组件状态存储器，用于简单的场景

提供数据可改为

provide() {
    //这时提供的theme 则为可响应的数据
    this.theme = Vue.observable({
    color: "blue"
    });
    return {
    theme: this.theme
    };
    },

转载于:https://www.cnblogs.com/LChenglong/p/11468899.html