首页vue2 provide inject

vue2 provide inject

时间: 2023-09-02 17:10:53 浏览: 189

Vue 2.0 中依赖注入 provide/inject组合实战

5星 · 资源好评率100%

Vue 2.0 的依赖注入（Dependency Injection）机制主要由 `provide` 和 `inject` 两个选项组成，它们提供了一种在组件树中跨层级传递数据的方法，避免了通过逐层传递 props 的复杂性。这一特性尤其适用于在复杂的组件结构中，当子孙组件需要访问到祖辈组件的状态或方法时。 `provide` 是一个对象或者返回对象的函数，用于定义可供子孙组件注入的属性。这些属性可以在祖辈组件中设置，并且可以使用 ES6 的 Symbols 作为键，以确保唯一性。 `inject` 是一个字符串数组或者对象，用于声明子孙组件需要从祖辈那里注入的属性。如果是一个字符串数组，它将直接引用 `provide` 对象中的属性名。如果是一个对象，key 是本地的绑定名，value 是祖辈组件 `provide` 对象中对应的属性名，还可以包含一个 `default` 属性，用于在注入的属性不存在时设定默认值。来看一个简单的例子： ```html <!DOCTYPE html>  <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"><child></child></div> <script> Vue.component('child',{ inject:['message'], template:'<p>{{message}}</p>' }) new Vue({ el:'#app', provide:{message:'Hello Vue!'} }) </script> </body> </html> ``` 在这个例子中，根组件 `Vue` 使用 `provide` 提供了一个名为 `message` 的属性，值为 `'Hello Vue!'`。子孙组件 `child` 使用 `inject` 注入了这个属性，并在模板中展示。所以，组件 `child` 的模板会显示 `'Hello Vue!'`。如果我们在中间添加一个组件层，如组件 `test`： ```html <!DOCTYPE html>  <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"><test></test></div> <script> Vue.component('child',{ inject:['message'], template:'<p>{{message}}</p>' }) Vue.component('test',{ template:`<div><child></child></div>` }) new Vue({ el:'#app', provide:{message:'Hello Vue!'} }) </script> </body> </html> ``` 即使组件 `test` 并没有提供 `message`，但因为 `child` 组件依然能通过 `inject` 从祖辈 `Vue` 实例中获取到 `message`，因此 `child` 的模板仍然正确地显示 `'Hello Vue!'`。从源码角度来看，`provide/inject` 的实现主要涉及组件注册、Vue 实例化以及组件实例化三个阶段。在组件注册时，Vue 使用 `Vue.extend()` 来创建组件构造器，这会触发 `mergeOptions()` 函数合并配置选项。在实例化过程中，Vue 会检查并处理 `provide` 和 `inject` 选项，确保数据能够正确地注入到子孙组件中。 Vue 2.0 的依赖注入提供了一种灵活的跨层级数据传递方式，使得组件之间的通信更加简单，尤其是在组件树结构复杂的情况下。通过 `provide` 和 `inject`，我们可以轻松地在组件之间共享状态和功能，而不必通过多层的 props 传递。

在Vue2中，`provide`和`inject`可以用于父组件向子组件传递数据。父组件通过`provide`选项提供数据，并在子组件中使用`inject`选项接收数据。例如，在父组件中可以这样写： ```javascript export default { provide: { info: "提供数据" } } ``` 而在子组件中可以这样接收数据： ```javascript export default { inject: ['info'], mounted() { console.log("接收数据：", this.info) // 输出：接收数据：提供数据 } } ``` 通过`provide`和`inject`可以实现父子组件之间的数据传递。在Vue2中，`provide`和`inject`不具备响应性，即当数据发生改变时，子组件不会自动更新。如果需要实现响应性，可以使用Vue的响应式系统，例如在Vue2中使用`Vue.observable`。<em>1</em><em>2</em><em>3</em> #### 引用[.reference_title] - *1* *2* *3* [vue中provide 和 inject 的用法](https://blog.csdn.net/zoukunyang/article/details/130111757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]

阅读全文