Vue的组件如何传值(2)
vue跨级通信传值:
-
EventBus;
-
Vuex;
-
provide / inject ;
-
$attrs / $listeners;
provide/inject:简单来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量,不管组件层级有多深,在父组件生效的生命周期内,这个变量就一直有效。
父组件:
export default {
provide: {
// 它的作用就是将 **name** 这个变量提供给它的所有子组件。
name: 'Jack' }
}
子组件:
export default {
inject: ['name'],
// 注入了从父组件中提供的name变量
mounted () {
console.log(this.name); // Jack
}
}