Vue非父子組件(爺孫關係)通信Provide&&Inject

通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。

 

 

 

 

 

 

 Vue中提供解決類似方法，有效解決組件嵌套過多父組件給子組件傳參問題

父組件||爺組件

    provide: {
        title: '非父組件傳參',
        name: 'liao_shuang',
        age: 18,
    },

子組件||子孫組件

 inject: ['title','name','age'],

這樣就實現了類似場景！

 要访问组件实例 property，我们需要将 provide 转换为返回对象的函数：

  provide() {
        return {
            title: '非父組件傳參',
            name: 'liao_shuang',
            age: 18,
            test_length: this.name.length,
        };
    },

 

 

 這樣就可以正常使用啦！