简介
vue-inject-js 是一个可以简单方便实现依赖注入的插件，可以在 Vue 组件中使用 @Inject() 和 @Provide() 来注入和提供一些数据或方法。这个插件的使用可以帮助我们更容易地管理组件之间的关系。
安装
在终端中运行以下命令来安装这个 npm 包：
npm install vue-inject-js
使用方法
注入
在需要注入的组件中使用 @Inject() 装饰器。例如：
import { Component, Inject } from 'vue-property-decorator';
@Component
export default class UserList extends Vue {
@Inject() users!: User[];
}这样，在 UserList 组件中就可以访问 users 字段了。
提供
在提供方的组件中使用 @Provide() 装饰器来提供数据。例如：
-- -------------------- ---- -------
------ - ---------- ------- - ---- -------------------------
----------
------ ------- ----- ------------ ------- --- -
---------- ----- - -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
- ----- ---------- ---- -- --
--
-这样，在包含 UserProvider 组件的父组件中，就可以使用 @Inject('users') 注入 users 字段了。
自定义键名
如果你想使用自定义的键名来代替默认的字段名，那么可以在 @Inject() 中传入键名作为参数。提供方的组件中也要相应地传入相同的键名。
-- -------------------- ---- -------
------ - ---------- ------- ------- - ---- -------------------------
----------
------ ------- ----- ----------- ------- --- -
------------------- ---------- ---------
-
----------
------ ------- ----- --------------- ------- --- -
-------------------- -------- - -
------- --------
---- --- ------
---- --- --------
--
-作用域
默认情况下，注入的数据是全局可见的。如果你想限制它只在当前组件中可见，那么可以使用 @Inject() 的 from 参数来指定依赖的提供方组件。
import { Component, Inject } from 'vue-property-decorator';
import UserProvider from './UserProvider.vue';
@Component
export default class UserList extends Vue {
@Inject({ from: UserProvider }) users!: User[];
}这样，UserList 组件就只能从 UserProvider 组件中获取 users 数据了。
示例代码
-- -------------------- ---- -------
----------
-----
-------- ---------
----
--- ----------- -- ------ -----------------
-- --------- -- --- -------- ---
-----
-----
------
-----------
------- ----------
------ - ---------- ------ - ---- -------------------------
------ ------------ ---- ---------------------
----------
------ ------- ----- -------- ------- --- -
--------- ----- ------------ -- ------- -------
-
----------- -------------------- ---- -------
----------
-----
----------- ---------
----
--- -------------- -- --------- ---------------
-- ------- --
-----
-----
------
-----------
------- ----------
------ - ---------- ------ - ---- -------------------------
------ --------------- ---- ------------------------
----------
------ ------- ----- ----------- ------- --- -
------------------- - ----- --------------- -- ---------- ---------
-
----------- -------------------- ---- -------
----------
-----
---------------
-----------------------
----------------
------------------
-----------------------------
-------------------
------
-----------
------- ----------
------ - --------- - ---- -------------------------
------ -------- ---- -----------------
------ ------------ ---- ---------------------
------ ----------- ---- --------------------
------ --------------- ---- ------------------------
------------
----------- - --------- ------------- ------------ --------------- --
--
------ ------- ----- --- ------- --- --
---------总结
vue-inject-js 可以让我们更容易地在组件中进行依赖注入。希望这个教程可以帮助你理解如何使用这个插件来管理你的 Vue 项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005603581e8991b448de630