Vue3Provide&Inject

Provide&Inject通常，当我们需要将数据从父组件传递到子组件时，我们使用props。想象一下这个结构：你有一些深度嵌套的组件，你只需要在一个深度嵌套的子组件中从父组件中获取一些东西。在这种情况下，您仍然需要将prop传递到整个组件链，这很烦人。对于这种情况，我们可以使用提供和注入对。父组件可以充当其所有子组件的依赖项提供者，无论组件层次结构有多深。这个特性有两个部分：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这个数据。Provide/injectscheme比如我们有这样一个层级：`Root└─TemplateM├─TestCom`如果我们的子组件需要调用父组件的方法，我们可以使用provide/inject来传递的Vue实例对象父组件进去：``然后在子组件中注入父组件的parent属性：``查看浏览效果如下：但是，如果我们尝试thisProvidesomecomponentinstancepropertyhere,thiswillnotwork:``provide:{todoLength:this.todos.length//willcauseanerror'Cannotreadproperty'length'ofundefined`},``访问组件实例property，我们需要将provide转换成一个返回对象的函数，然后我们将父组件的实例传递给子组件，这样我们就可以在子组件中访问父组件的属性：``在子组件中使用父级：``视图浏览效果如下：这让我们可以更安全地继续开发这个组件，而不用担心可能会改变/移除子组件所依赖的东西。这些组件之间的接口仍然定义良好，就像props一样。实际上，您可以将依赖注入视为“longrangeprops”，除了：父组件不需要知道哪些子组件使用它提供的属性子组件不需要知道注入的属性来自哪里