Ein Artikel über die Verwendung von Provide und Inject in Vue

Wie verwende ich Provide und Inject in Vue? Der folgende Artikel wird Ihnen die Verwendung von Provide und Inject in Vue vorstellen. Ich hoffe, er wird Ihnen hilfreich sein!

In vue2.0 sind provide und inject Es wird in Komponenten in Form einer optionalen (Konfigurations-)API verwendet, die eine Art der Kommunikation zwischen Komponenten (Enkel und Nachkommen) vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的，解决的是跨组件(祖孙)间通信的一种方式

也就是父子组件间的通信,父组件上市通过自定义属性，而子组件间通过props这种方式接收，如果想要一层一层的传递，这种方式就会比较麻烦，不灵活

provide与inject就是解决：怎么从祖组件的数据，传递到孙组件，实现跨级组件传递数据的

在vue3.0里面，同样提供了provide与inject，使用起来更简单方便，单纯的从概念上去看，是比较抽象，难以理解的。【相关推荐：vuejs视频教程、web前端开发】

还是要从具体的实例出发

provide()函数

定义：提供一个值，可以被后代组件注入

实现： 父组件有一个provide,选项来提供数据，后代组件中有一个inject选项来开始使用父组件传递过来的数据

provide(第一个参数,第二个参数)，接收两个参数,第一个参数是要注入的key，它可以是一个字符串或一个symbol，第二个参数是要注入的值(具体要传递给子孙组件的数据)

provide是vue官方提供的componsition API

具体示例代码如下所示

import {reactive,provide} from "vue";

let person = reactive({name: 'itclanCoder',website: 'https://coder.itclan.cn'});
provide('person',person);

通过上面的provide提供一个值,就可以了的，那怎么样把这个数据传递到子孙组件，那么就需要用到inject了的

inject()函数

定义: 注入一个由祖先(父)组件或整个应用提供的值

实现: 接收父(祖)组件传递过来的值

inject(第一个参数,第二个参数(可选)):第一个参数是注入的key,来自父(祖)组件,它们两者是需要保持一致的

Vue会遍历父组件链,通过匹配key来确定所提供的值,如果父组件链上多个组件对同一个key提供了之,那么离得更近的将会覆盖链上更远的组件所提供的值

如果没有能通过key匹配到的值,inject()函数将返回undefined,除非提供一个默认值

第二个参数是可选的,即没有匹配到key时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数

那么必须将false作为第三个参数传入,表明这个函数就是默认值,而不是一个工厂函数

与注册生命周期钩子的API类似,inject()必须在组件的setup()阶段同步调用

具体示例代码

import {inject,toRefs} from  "vue";

const person = inject('person');
// 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数
const {name,website} = toRefs(person);

在孙组件中的模板即可以读取,从父组件传递过来的数据也是支持响应式的

{{person.name}}---{{person.website}}

若使用解构时,则模板中可直接使用变量

{{name}}--{{website}}

若使用解构时,则模板中可直接使用变量

{{name}}--{{website}}

注意

如果是解构变量,想要数据响应式,那么需要使用toRef()或toRefs()将数据进行转化为响应式

如下是完整的示例

import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 注入值的默认方式
const foo = inject('foo') 

// 注入响应式的值
const count = inject('count')

// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)

// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')

// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())

// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)

基本上用第一种注入默认值的方式,使用是最多的,接收父组件提供传递过来的值

总结

provide()与inject()

, also Eltern-Kind, löst Komponenten Für die Kommunikation wird die übergeordnete Komponente über benutzerdefinierte Attribute aufgelistet und die untergeordneten Komponenten werden über props empfangen. Wenn Sie sie Schicht für Schicht übergeben möchten, ist diese Methode problematischer und unflexibler 🎜#

provide und inject sind die Lösung: So übergeben Sie die Daten von der Vorgängerkomponente an die Enkelkomponente, um eine komponentenübergreifende Datenübertragung zu erreichen# 🎜🎜 #

In vue3.0 werden auch provide und inject bereitgestellt, die einfacher und bequemer zu verwenden sind Aus konzeptioneller Sicht ist es relativ abstrakt und schwer zu verstehen. [Verwandte Empfehlungen: vuejs Video-Tutorial

, Web-Frontend-Entwicklung】 muss noch beginnen Konkrete Beispiele

provide() function

Definition: Stellt einen Wert bereit, der kann sein Injektion einer abgeleiteten Komponente#🎜🎜##🎜🎜#Implementierung: Die übergeordnete Komponente verfügt über eine provide-Option zum Bereitstellen von Daten, und die abgeleitete Komponente verfügt über eine inject Option zum Starten der Verwendung der von der übergeordneten Komponente übergebenen Daten#🎜🎜##🎜🎜#bereitstellen(erster Parameter, zweiter Parameter), Empfang von zwei Parametern, der erste Parameter soll injiziert werden key, der eine Zeichenfolge oder ein symbol sein kann. Der zweite Parameter ist der einzufügende Wert (spezifische Daten, die an untergeordnete Komponenten übergeben werden sollen) #🎜🎜 ##🎜🎜 #provide ist die componsition API, die offiziell von vue bereitgestellt wird#🎜🎜##🎜🎜#Der spezifische Beispielcode lautet wie folgt#🎜 🎜# rrreee#🎜🎜# Geben Sie einfach einen Wert über das obige provide an, wie Sie diese Daten dann an die untergeordnete Komponente übergeben, dann müssen Sie inject verwenden的#🎜🎜#

inject() function

#🎜🎜#Definition: Inject a Der vom Vorfahren (übergeordnete) bereitgestellte Wert )-Komponente oder die gesamte Anwendung#🎜🎜##🎜🎜#Implementierung: Empfangen Sie den von der übergeordneten (Vorfahren-)Komponente übergebenen Wert#🎜🎜##🎜🎜#inject (Erster Parameter, zweiter Parameter (optional): Der erste Parameter ist der injizierte key, der von der übergeordneten Komponente (Vorfahren) stammt. Sie müssen konsistent sein #Vue durchläuft die übergeordnete Komponentenkette und ermittelt den bereitgestellten Wert durch Abgleichen des Schlüssels. Wenn mehrere Komponenten in der übergeordneten Komponentenkette mit demselben Schlüssel-Code> übereinstimmen, wird dieser bereitgestellt Je näher der Wert liegt, desto mehr wird der Wert überschrieben, der von der Komponente weiter oben in der Kette bereitgestellt wird Die Funktion /code> gibt undefiniert zurück, sofern kein Standardwert angegeben wird. #🎜🎜##🎜🎜#Der zweite Parameter ist optional, d. h. es gibt keine Übereinstimmung für false code> wird als dritter Parameter übergeben, was darauf hinweist, dass diese Funktion der Standardwert und keine Factory-Funktion ist. #🎜🎜##🎜🎜# ähnelt der <code>API zum Registrieren von Lebenszyklus-Hooks,inject() muss synchron in der setup()-Phase der Komponente aufgerufen werden#🎜🎜##🎜🎜#Spezifischer Beispielcode#🎜🎜#rrreee#🎜🎜#In So kann die Vorlage in der Komponente gelesen werden und die von der übergeordneten Komponente übergebenen Daten unterstützen auch die Reaktionsfähigkeit. #Wenn Destrukturierung verwendet wird, können Variablen direkt in der Vorlage verwendet werden #🎜🎜#rrreee#🎜🎜#Hinweis#🎜🎜##🎜🎜#Wenn es sich um eine destrukturierende Variable handelt und Sie möchten, dass die Daten reagieren, müssen Sie toRef() oder toRefs() verwenden. Code>, um die Daten in reaktionsfähige Daten umzuwandeln der übergebene Wert, der von der übergeordneten Komponente bereitgestellt wird#🎜🎜#<h2 data-id="heading-2"><strong>Summary</strong></h2>#🎜🎜#<code>provide() und inject() sind relativ einfach zu verwenden. Sie sind eine Möglichkeit, die komponentenübergreifende Kommunikation für tiefere Komponenten zu lösen, wenn die untergeordnete Komponente die Daten in der übergeordneten Komponente verwenden möchte 🎜##🎜🎜#, dann kann diese Methode zum Übertragen von Daten verwendet werden. Dies ist auch in Interviews mit hoher Frequenz nützlich -Kommunikation mit untergeordneten Komponenten #🎜🎜##🎜🎜# (Teilen von Lernvideos: #🎜🎜#vuejs-Einstiegs-Tutorial#🎜🎜#, #🎜🎜# Programmiergrundlagen-Video#🎜🎜#)#🎜🎜#

Das obige ist der detaillierte Inhalt vonEin Artikel über die Verwendung von Provide und Inject in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!