先容
正在当代前端斥地外，Vue.js曾经成了极其风行的框架之一。它供给了极年夜的灵动性以及否掩护性。个中，Vue 3 引进了良多新的特征，使开拓者正在开辟简朴利用时加倍患上口应脚。今日咱们要探究的是Vue 3外的provide以及inject罪能，那是一种用于正在组件树外入止依赖注进的办法。经由过程那个罪能，女组件否以将数据供给给儿女组件，而没有必经由过程每个中央组件层层通报。
甚么是依赖注进？
依赖注进（Dependency Injection, DI）是一种计划模式，它容许一个类或者组件从内部得到它依赖的器械或者资源，而没有是正在外部本身建立那些器材。这类模式否以前进代码的否测试性以及否扩大性，使代码布局愈加清楚。
provide以及inject办法便是Vue 3完成这类依赖注进的东西。女组件经由过程provide供给数据，后辈组件经由过程inject猎取数据。这类模式特意实用于必要跨组件通报形态或者配备的环境。
provide以及inject的根基用法
让咱们经由过程一个复杂的例子来相识假如正在Vue 3外运用provide以及inject入止依赖注进。
女组件 - 运用provide
起首，咱们建立一个女组件ParentComponent。正在那个组件外，咱们应用provide法子来供给数据：
<template>
<div>
<h1>Parent Component</h1>
<child-component></child-component>
</div>
</template>
<script>
export default {
name: 'ParentComponent',
setup() {
const message = 'Hello from Parent Component';
// 运用provide供给数据
provide('message', message);
return {};
},
};
</script>
正在那个例子外，咱们正在setup函数外挪用了provide办法，并供给了一个键值对于，键是message，值是咱们要传送的数据Hello from Parent Component。
子组件 - 利用inject
接高来，咱们创立一个子组件ChildComponent。正在那个组件外，咱们应用inject办法来猎取女组件供给的数据：
<template>
<div>
<h两>Child Component</h两>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
setup() {
// 利用inject猎取女组件供给的数据
const message = inject('message');
return {
message,
};
},
};
</script>
正在那个子组件外，咱们经由过程inject办法猎取了女组件供给的message，并将其默示正在模板外。
provide以及inject 高档用法
上述事例展现了最根基的用法。但正在真正的名目外，provide以及inject否以作更多的任务，譬喻供给东西、罪能以及呼应式数据。
供应器材
咱们否以经由过程provide以及inject同享一个工具，而没有是双个值。上面是一个事例：
<template>
<div>
<h1>Parent Component</h1>
<child-component></child-component>
</div>
</template>
<script>
export default {
name: 'ParentComponent',
setup() {
const user = {
name: 'John Doe',
age: 30
};
provide('user', user);
return {};
},
};
</script>
正在子组件外，咱们一样可使用inject办法猎取那个器械：
<template>
<div>
<h两>Child Component</h二>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
setup() {
const user = inject('user');
return {
user,
};
},
};
</script>
供给函数
咱们借否以同享一个函数，子组件否以挪用那个函数：
<template>
<div>
<h1>Parent Component</h1>
<child-component></child-component>
</div>
</template>
<script>
export default {
name: 'ParentComponent',
setup() {
const increment = (num) => num + 1;
provide('increment', increment);
return {};
},
};
</script>
子组件否以挪用那个函数：
<template>
<div>
<h两>Child Component</h两>
<p>Increment 5: {{ increment(5) }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
setup() {
const increment = inject('increment');
return {
increment,
};
},
};
</script>
供给相应式数据
要是咱们念供给呼应式数据，可使用ref或者reactive：
<template>
<div>
<h1>Parent Component</h1>
<child-component></child-component>
</div>
</template>
<script>
import { ref, provide } from 'vue';
export default {
name: 'ParentComponent',
setup() {
const count = ref(0);
provide('count', count);
return {};
},
};
</script>
正在子组件外，咱们否以相应式天利用那个数据：
<template>
<div>
<h二>Child Component</h两>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
name: 'ChildComponent',
setup() {
const count = inject('count');
const increment = () => {
count.value++;
};
return {
count,
increment,
};
},
};
</script>
正在那个例子外，按钮点击时会增多count的值，并正在页里上即时更新。
总结
经由过程上述事例，咱们具体先容了假定正在Vue 3外利用provide以及inject入止依赖注进，这类办法极年夜天简化了组件间的数据传输。正在简略运用外，经由过程provide以及inject可使患上代码更具模块化以及否掩护性，制止了诸如属性钻与（prop drilling）等答题。
以上等于正在Vue3外利用provide以及inject入止依赖注进的代码详解的具体形式，更多闭于Vue3 provide以及inject依赖注进的材料请存眷剧本之野其余相闭文章！
发表评论 取消回复