Vue2 使用 provide/inject 实现响应式数据传递

本文档主要介绍了在Vue2中如何使用`provide`和`inject`选项来实现组件间的响应式数据传递，特别是在父子组件之间。它提供了三种不同的使用场景和示例，包括常规写法、不太常规的写法以及在TypeScript环境下的应用。 常规写法 在Vue2中，如果父组件想要向子组件传递数据，通常我们会使用props。但是，当需要传递的数据是复杂的引用类型或者希望避免过多的props传递时，可以使用`provide`和`inject`。以下是一个基本的示例： ```javascript // 父级组件 var Provider = { data() { return { foo: 'bar' } }, provide() { return { fooProvide: this.fooFn // 传递一个引用类型函数过去 } }, methods: { fooFn() { return this.foo } } } // 子组件 var Child = { inject: ['fooProvide'], computed: { fooComputed() { return this.fooProvide() // 因为传递过来的是个引用类型的函数 } }, created() { console.log(this.fooComputed) } } ``` 在这个例子中，父组件通过`provide`提供了一个方法`fooFn`，子组件通过`inject`注入了这个方法，并在计算属性中调用它以获取响应式数据。 不太常规的写法 有时，可能更希望传递整个父组件实例，而不是单独的属性或方法。这样，子组件可以直接访问父组件的所有响应式数据： ```javascript // 父级组件 var Provider = { data() { return { foo: 'bar', other: '' } }, provide() { return { app: this // 传递整个this过去 } }, mounted() { const that = this; setTimeout(() => { that.foo = '改变值' }, 4000) } } // 子组件 var Child = { inject: ['app'], created() { console.log(this.app.foo) // this.app下面都是响应式的,因为都是同一实例下的引用 } } ``` 在这个例子中，父组件通过`provide`传递了整个`this`对象，子组件可以通过`inject`注入并访问所有响应式属性。 在TypeScript环境下的应用 当使用TypeScript编写Vue组件时，我们可以使用装饰器来声明`provide`和`inject`： ```typescript // 父级组件 @Component class ProviderComponent { @Provide() foo = 'foo'; @Provide('bar') baz = 'bar'; refreshNum = 0; refreshNumFn() { return this.refreshNum; } // 省略其他方法... } // 子组件 @Component class ChildComponent { @Inject() foo: string; @Inject('bar') bar: string; @Inject(s => s.refreshNumFn) baz: () => number; // 省略其他方法... } ``` 在这里，`@Provide`用于在父组件中声明要提供的属性或方法，而`@Inject`则用于子组件中声明要注入的属性或方法，确保类型安全。 总结来说，Vue2的`provide`和`inject`选项提供了一种灵活的方式，允许父组件向任何深度的子孙组件传递响应式数据，而不仅仅是直接的子组件。这种方式尤其适用于处理复杂的数据结构和避免 prop 逐层传递的问题。同时，结合TypeScript的装饰器，可以进一步提升代码的可读性和类型安全性。