Vue跨层级通信-provide&inject

跨层级通信

Q：Vue中的跨层级通信，父组件使用provide提供数据，子孙组件通过inject取值使用，子孙组件可以修改provide传递过来的值吗？

在 Vue 中，provide 和 inject 用于跨层级的通信，它们主要是为了在祖先组件和后代组件之间共享数据。默认情况下，子孙组件通过 inject 获取的值是只读的，也就是说子孙组件不能直接修改通过 provide 传递过来的值。如果需要子孙组件能够修改这些值，有以下几种方法：

1. 提供一个方法来更新值：在父组件中定义一个方法来更新提供的数据，然后在子孙组件中调用这个方法。

   父组件：

   export default {
     provide() {
       return {
         sharedState: this.sharedState,
         updateSharedState: this.updateSharedState
       }
     },
     data() {
       return {
         sharedState: 'initial value'
       }
     },
     methods: {
       updateSharedState(newValue) {
         this.sharedState = newValue;
       }
     }
   }
   

   子组件：

   export default {
     inject: ['sharedState', 'updateSharedState'],
     methods: {
       changeValue() {
         this.updateSharedState('new value');
       }
     }
   }
   

2. 使用可变对象：如果提供的数据是一个对象，子孙组件可以修改这个对象的属性，因为对象是引用类型。

   父组件：

   export default {
     provide() {
       return {
         sharedState: this.sharedState
       }
     },
     data() {
       return {
         sharedState: {
           value: 'initial value'
         }
       }
     }
   }
   

   子组件：

   export default {
     inject: ['sharedState'],
     methods: {
       changeValue() {
         this.sharedState.value = 'new value';
       }
     }
   }
   

需要注意的是，使用这两种方法时，Vue 的响应式系统会自动处理数据的变化，从而确保视图能够根据数据的变化自动更新。