Vue的组件如何传值（2）

vue跨级通信传值：

1. EventBus；
2. Vuex；
3. provide / inject ；
4. $attrs / $listeners；

 

 

provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。 

 

父组件：

export default { 
    provide: { 
    // 它的作用就是将 **name** 这个变量提供给它的所有子组件。 
       name: 'Jack' } 
}

 

 

子组件： 

export default { 
    inject: ['name'], 
    // 注入了从父组件中提供的name变量 
    mounted () { 
        console.log(this.name);  // Jack 
    } 
}