Die Art und Weise, wie vue2-vue3-Komponenten Werte übergeben

So übergeben Sie Werte zwischen Komponenten

Zusammenfassen

• Von der übergeordneten Komponente zur untergeordneten Komponente
  • Übergeordnete Komponenten übergeben Werte, indem sie Eigenschaften festlegen, wenn untergeordnete Komponenten verwendet werden, und untergeordnete Komponenten verwenden Requisiten zum Empfangen
• Untergeordnete Komponente zur übergeordneten Komponente
  • Benutzerdefiniertes Ereignis Die übergeordnete Komponente übergibt das benutzerdefinierte Ereignis an die untergeordnete Komponente, und die untergeordnete Komponente sendet es aus

Was ist ein unidirektionaler Datenfluss?

1. Was ist ein unidirektionaler Datenfluss
   ? Der Datenfluss bezieht sich auf den Datenfluss zwischen Komponenten. Ein unidirektionaler Datenfluss bedeutet, dass Daten nur von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden können. Die untergeordnete Komponente kann die Eigenschaften der übergeordneten Komponente nicht ändern Komponente . Wenn Sie es ändern möchten, gibt es andere Möglichkeiten.
2. Warum kann es nicht bidirektional sein? Wenn sich
   die Daten der übergeordneten Komponente ändern, wird die untergeordnete Komponente benachrichtigt, um sie automatisch über Requisiten zu aktualisieren. Verhindern Sie Datenverwechslungen, wenn mehrere untergeordnete Komponenten versuchen, den Status der übergeordneten Komponente zu ändern

Vorteile des unidirektionalen Datenflusses

• Durch den unidirektionalen Datenfluss sind alle Zustandsänderungen aufzeichnungs- und rückverfolgbar und die Quelle lässt sich leicht nachverfolgen.
• Es gibt nur eine Kopie aller Daten und nur einen Ein- und Ausgang für Komponentendaten, was das Programm intuitiver und verständlicher macht und sich positiv auf die Wartbarkeit der Anwendung auswirkt.

Übergeben Sie den Wert von der übergeordneten Komponente an die untergeordnete Komponente

Methode 1: Requisiten

Allgemeine Anweisungen
1. props ist eine schreibgeschützte Eigenschaft und Unterkomponenten können den übergebenen Wert nicht ändern.
2. Der in der Props-Methode übergebene Wert ist eine flache Kopie

Übertragungsmethode
1. Verwenden Sie untergeordnete Komponenten für die übergeordnete Komponente, um Werte über die Eigenschaften der untergeordneten Komponenten zu übergeben.
2. Die untergeordnete Komponente propsakzeptiert den von der übergeordneten Komponente übergebenen Wert.

Options-API-Schreibmethode

• Unterkomponenten propsempfangen Daten über Parameter, und die Daten werden zuerst auf der VC-Komponente (vc.data) festgelegt.
  • Wenn die Unterkomponente nicht verwendet wird , wird das übergebene Attribut in propsder Unterkomponente und nicht in der vc-Instanz der Unterkomponente gespeichert.$attrs
  • Wenn die Unterkomponente verwendet wird props, wird das übergebene Attribut direkt in der vc-Instanz der Unterkomponente gespeichert und $attrsnicht in der Unterkomponente gespeichert

//1.父组件通过属性传值
<Student :name=name :sex=sex :age=age/>
//option API
//写法1:子组件接收值，简单接收
props:['name','sex','age']

//写法2:子组件接收值，设置传来值的类型
props:{
    
    
	name:String,
	sex:String,
	age:Number	
}

//写法3: 子组件接收值，完整写法
props:{
    
    
	name:{
    
    
		type:String,
		required:true //是否必须
		 default: "table" 
	},
	age:{
    
    
		type:Number,//类型
		default:99 //默认值
	},
	 rowClick: {
    
    
      type: Function,
      default: () =>{
    
    }
    },
     columns: {
    
    
      type: Array,
      default:() =>[]
    },
    api: {
    
    
      type: Object,
      default:()=>({
    
    })
    },
}

Standardwert

1. Wenn Sie Standard zum Definieren des Standardwerts verwenden und die übergeordnete Komponente einen übergebenen Wert hat, wird dieser mit dem übergeordneten Wert gerendert. Wenn die übergeordnete Komponente keinen Wert übergibt, wird der Standardwert verwendet.
2. Wenn kein Standardwert definiert ist und die übergeordnete Komponente einen Wert hat, wird dieser mit dem übergeordneten Wert gerendert. Wenn die übergeordnete Komponente keinen Wert übergibt, wird der Standardwert dieses Typs verwendet.

String ''
Number 0
Array []
Object {
    
    }

Der Standardwert von Requisiten wird nur gelesen, wenn keine Parameter übergeben werden. Wenn ein unvollständiges Objekt übergeben wird, wird der Standardwert für die Eigenschaften des Objekts, die keinen Wert haben, nicht gefüllt

Alle Requisiten-Standardwerte (vue2 und vue3) müssen geschrieben werden.
Grunddatentyp: direkte Zuweisung.
Objektdatentyp: Funktionszuweisung verwenden()=>{}

Wenn {} und [] direkt verwendet werden und mehrere übergeordnete Komponenten diese Komponente verwenden, übergeben sie keine Requisiten und verwenden den Standardwert. Unter der Annahme, dass eine der übergeordneten Komponenten den Standardwert ändert (nicht empfohlen, es wird eine Warnung angezeigt), ändern sich auch andere übergeordnete Komponenten, da sie auf die Referenzadresse im selben Speicher verweisen.
Verwenden Sie für die Rückgabe die Form einer Funktion, um sicherzustellen, dass bei jeder Ausführung der Funktion ein neues Objekt zurückgegeben wird.

Kompositions-API | defineProps-Kompilierungsmakro

defineProps()Es kann direkt ohne Definition und Referenz verwendet werden.
Rückgabewert: Gibt ein Proxy-Objekt zurück, das aus akzeptierten Eigenschaften besteht

veranschaulichen

• definePropsund sind Compiler-Makros, die defineEmitsnur in verwendet werden können . <script setup>Sie müssen nicht importiert werden und werden <script setup>zusammen mit der Verarbeitung von kompiliert.
• definePropsoder defineEmitsVerwenden Sie entweder eine Laufzeitdeklaration oder eine Typdeklaration. Die gleichzeitige Verwendung beider Deklarationsmethoden führt zu Kompilierungsfehlern.
• Bei der Verwendung in Vorlagen können Requisiten weggelassen werden .

//第一种，简单接收
const props = defineProps(["name"]);
//第二种设置接收的类型
defineProps({
    
    
  page:Number
});
//第三种设置接收的类型和默认值
defineProps({
    
    
  page:{
    
    
    type:Number,
    default:2
  }
});
//第四种设置传来值的多种类型
defineProps({
    
    
  page:[String,Number]
})

Die Laufzeitdeklaration bezieht sich auf die Deklaration des Requisitentyps. Diese Art der Deklaration kann vom IED nicht erkannt und bereitgestellt werden. Die Eingabeaufforderung wird erst nach der Ausführung ausgegeben. Die Requisiten-API gehört zur Laufzeitdeklaration.
Typdeklaration Hier bezieht sich die Typdeklaration auf ts-basierte Typprüfung, Typeinschränkungen für Requisiten und Unterstützung für IDE-Typinferenz und -prüfung. Um Typdeklarationen verwenden zu können, muss man daher auf ts basieren, d. h. <script setup lang="ts">

So schreiben Sie eine Kompositions-API-Laufzeitdeklaration

const props = defineProps({
    
    
foo: String,
bar: {
    
    
  type: Number,
  required: true
}
})
</script>

So schreiben Sie eine Kompositions-API-Typdeklaration

<script setup lang='ts'>
interface List {
    
    
    id: number,
    content: string
}

const props = defineProps<{
    
    
  foo?: string
  list: List // 接口
}>()
</script>

Standardwert für Props-Typdeklaration | widthDefaults kompiliertes Makro

<script setup lang="ts">
interface Props {
    
    
        msg?: string
        labels?: string[]
 }
 const props = withDefaults(defineProps<Props>(), {
    
    
       msg: 'hello',
       labels: () => ['one', 'two']
 })
</script>

Methode 2: Attribute und Ereignisse für Komponenten

vue2 $attrs + $listeners

Wenn mehrschichtige verschachtelte Komponenten Daten übergeben, können Sie dies verwenden, wenn Sie die Daten einfach ohne Zwischenverarbeitung übergeben, beispielsweise wenn die übergeordnete Komponente Daten an die untergeordnete Komponente übergibt

• $attrs: Enthält eine Sammlung von Nicht- Eigenschaften im übergeordneten Bereich mit Ausnahme classvon und . Indem Sie alle in Frage kommenden Attributsammlungen im übergeordneten Bereich abrufen und sie dann weiterhin an andere Komponenten innerhalb der untergeordneten Komponente übergeben, können Sie übergebenstylepropsthis.$attrsv-bind="$attrs"
• $listeners: Enthält .nativeeine Sammlung von Überwachungsereignissen, außer im übergeordneten Bereich. Wenn Sie weiterhin an andere Komponenten innerhalb der Unterkomponente übergeben möchten, können Sie übergebenv-on="$linteners"

Vue3 useAttrs-Methode

useAttrs(): Ruft die Eigenschaften und Ereignisse der Komponente ab. Es können nur Nicht- Eigenschaftensammlungen außer classund im übergeordneten Bereich akzeptiert werden . Es können sowohl native DOM-Ereignisse als auch benutzerdefinierte Ereignisse akzeptiert werden.styleprops

<template>
	<el-button :="$attrs"></el-button>
</template>

<script setup lang="ts">
import {
    
     useAttrs } from 'vue';
let $attrs  = useAttrs(); //返回的attrs是一个响应式代理对象 
</script>

:="$attrs"Die Bedeutung der Schreibmethode besteht darin, $attrsdas Objekt zu dekonstruieren, es keyals Attributnamen und valueals Attributwert darzustellen

<h1 v-bind="{a:1,b:2}">123</h1>
//页面中显示
<h1 a="1" b="2">123</h1>

Methode 3: $parent + defineExpose Kompilierungsmakro | Holen Sie sich die Instanz der übergeordneten Komponente innerhalb der untergeordneten Komponente

$parentDie Instanz der übergeordneten Komponente kann innerhalb der untergeordneten Komponente abgerufen werden

//子组件
<button @click="handler($parent)"></button>

//父组件暴露
defineExpose({
    
    })

Komponenten, die das Skript-Setup verwenden, werden standardmäßig geschlossen , und die über die Vorlagenreferenz oder die $parent-Kette erhaltene Instanz der Komponente stellt keine im Skript-Setup deklarierten Daten offen.
Zum Offenlegen von Daten muss das Compiler-Makro „defineExpose“ verwendet werden

Methode 4: Slot-Struktur übergeordnet -> untergeordnet

Nachdem standardmäßig auf die Komponente verwiesen wird, verwendet die übergeordnete Komponentenvorlage die Komponente und die Struktur innerhalb der öffnenden und schließenden Tags der Komponente wird nicht gerendert. Wenn Sie es rendern möchten, also die HTML-Struktur von der übergeordneten Komponente an die untergeordnete Komponente übergeben möchten, können Sie Slots verwenden.

Slot-Funktion : Ermöglicht der übergeordneten Komponente, die HTML-Struktur an der angegebenen Position der untergeordneten Komponente einzufügen

Art des Steckplatzes

• Standard-Slot: Die übergeordnete Komponente übergibt die HTML-Struktur an die untergeordnete Komponente (entspricht dem Verlassen einer HTML-Grube durch die untergeordnete Komponente, und die übergeordnete Komponente übergibt den HTML-Code, um die Grube zu füllen).
• Benannter Slot (benannt nach dem Namensattribut des Slot-Tags): Die übergeordnete Komponente entscheidet, an welchen Slot die HTML-Struktur übergeben werden soll.
• Bereichsbezogene Slots: Die übergeordnete Komponente übergibt die HTML-Struktur an die untergeordnete Komponente und die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente zurück. Die Daten befinden sich in der untergeordneten Komponente, die anhand der Daten generierte Struktur muss jedoch von der übergeordneten Komponente bestimmt werden

Standardsteckplatz
Es können mehrere Standardsteckplätze für dieselbe Komponente vorhanden sein

//Parent.vue
<Child>
<div>默认插槽</div>
</Child>

//Child.vue
<slot></slot> //默认插槽 <div>默认插槽</div>
<slot></slot>

Benannter Steckplatz
Zum Benennen des Steckplatzes verwenden <slot name="xxx">, und die übergeordnete Komponente wählt den einzufügenden Steckplatz aus (①②beide sind in vue3 geschrieben)
①Verwenden Sie <template v-slot:xxx>
②abgekürztes Formular<template #xxx>

Es können mehrere Titelslots derselben Komponente vorhanden sein

//Child.vue
<slot name="a"></slot>

//Parent.vue
<template #a>
    <div>我是填充具名插槽a位置结构</div>
</template>

Bereichssteckplatz Bereichssteckplatz
: Daten: untergeordnetes Element -> übergeordnetes Element Struktur: übergeordnetes Element -> untergeordnetes Element
Verwendungsszenario: Die Komponente, in der sich die Daten im Steckplatz befinden, die anhand der Daten generierte Struktur muss jedoch von der übergeordneten Komponente bestimmt werden.

Die Daten befinden sich in der untergeordneten Komponente (Bereich) und die Struktur wird von der übergeordneten Komponente übergeben.

Schritt
1. <slot :xxxx="yyy">Übergeben Sie die Daten an die übergeordnete Komponente, die feste Schreibweise des Slots. Übergeben Sie ein Objekt, der Schlüssel ist xxx und der Wert ist yyy.
2. Die übergeordnete Komponente verwendet den Rollenslot <template v-slot="{xxxx}">, der hier dekonstruiert werden muss

<Child :todos="todos">
	//v-slot接受子组件传递回来的数据
   <template v-slot="{ row, index }">
     <p :style="{ color: row.done ? 'green' : 'red' }">
      {
    
    {
    
    row.title }}--{
    
    {
    
     index }}
     </p>
	</template>
</Child>
let todos = ref([
  {
    
     id: 1, title: "ranran", done: true },
  {
    
     id: 2, title: "ranran1", done: false },
  {
    
     id: 3, title: "ranran2", done: true },
  {
    
     id: 4, title: "ranran3", done: false },
]);


//Child.vue
//子组件回传数据给父组件
<ul>
   <li v-for="(item, index) in todos" :key="item.id">
    <!--作用域插槽:可以讲数据回传给父组件-->
    <slot :row="item" :index="index"></slot>
   </li>
</ul>

<script setup lang="ts">
//通过props接受父组件传递数据
defineProps(["todos"]);
</script>

Übergabe von der untergeordneten Komponente zur übergeordneten Komponente

Benutzerdefinierte Ereignisse und native DOM-Ereignisse

// 在vue2中，这种写法为自定义事件
// 在vue3中，这种写法为原生DOM事件
<Child @click=""></Child>

• Wenn eine Komponente ein Ereignis bindet, bindet vue2 standardmäßig ein benutzerdefiniertes Ereignis. In vue2 .nativekönnen Bezeichner beispielsweise verwendet werden, @click.nativeum benutzerdefinierte Ereignisse in native DOM-Ereignisse umzuwandeln und Ereignisse an den Stammknoten der Unterkomponente zu binden.
• Die nativen DOM-Ereignisse von Vue3 sind native Ereignisse, unabhängig davon, ob sie auf Tags oder Komponenten platziert sind. Obwohl die native DOM-Ereignisbindung von vue3 auch ein natives Ereignis für die Komponente ist, wird das Ereignis als benutzerdefiniertes Ereignis ausgelöst,
  solange die untergeordnete Komponente die von der übergeordneten Komponente übergebene Funktion akzeptiert .defineEmits

Methode 1: Benutzerdefiniertes Ereignis/natives DOM-Ereignis + Emit-Methode

Optionen-API-Schreibmethode | $emit()

1. Binden Sie das benutzerdefinierte Ereignis an die Instanz-VC der untergeordneten Komponente, die Rückruffunktion befindet sich in der übergeordneten Komponente und die Parameter werden über die Rückruffunktion empfangen

• Schreibmethode 1: Verwenden Sie die Rückruffunktion in der übergeordneten Komponente @oder binden Sie sie an den VC der untergeordneten Komponentev-on:@自定义事件=’事件回调'
• this.$refs.xxxSchreibmethode 2: Rufen Sie die Instanz der untergeordneten Komponente in der übergeordneten Komponente ab und verwenden Sie $on(‘事件名’，回调函数)das benutzerdefinierte Bindungsereignis

2. Die Unterkomponente $emit()löst ein benutzerdefiniertes Ereignis aus und übergibt Parameter, und die Unterkomponente this.$off()löst die Bindung des benutzerdefinierten Ereignisses

//父组件
<template>
  <div>
    <h1>我是父组件</h1>
    <Son :info="info" @change="fn"></Son>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
    
    
  data() {
    
    
    return {
    
    
      info: "我是父组件中的数据",
    };
  },
  components: {
    
    
    Son,
  },
  methods: {
    
    
    fn(info) {
    
    
      this.info = info +  "我是父组件中点击修改后的数据";
    },
  },
};
</script>

//子组件
<template>
  <div>
    <h2>我是子组件</h2>
    <p>{
    
    {
    
     info }}</p>
    <button @click="fn">修改数据（子）</button>
  </div>
</template>

<script>
export default {
    
    
  props: ["info"], //父传子
  methods: {
    
    
    fn() {
    
    
      //这种直接赋值prop是不可取的，vue会直接报错
      //this.info=this.info+"子组件直接赋值prop"
      // 修改数据
      this.$emit('change',this.info + ",我现在被子组件emit了"); //触发自定义事件并传值，父组件自定义事件的回调函数触发
    },
  },
};
</script>

Kompositions-API-Schreibmethode | defineEmits-Kompilierungsmakro

defineEmits akzeptiert die von der übergeordneten Komponente übergebene benutzerdefinierte Funktion.
Rückgabewert: (event, ...args) => instance.emit(event, ...args)Gibt eine Funktion zurück, der erste Parameter ist der Name des benutzerdefinierten Ereignisses und der zweite Parameter beginnt mit dem an die benutzerdefinierte Funktion übergebenen Parameter.

So schreiben Sie eine Laufzeitanweisung

//子组件
<template>
  <button @click="butFn">改变page值:{
    
    {
    
    page}}</button>
</template>


<script setup>
import {
    
     defineEmits } from "vue";
const emit = defineEmits(["pageFn"]);   //定义一个变量来接收父组件传来的方法
const butFn=()=>{
    
    
    emit("pageFn",5)//触发该方法，5为传递的参数
}
</script>

So schreiben Sie eine Kompositions-API-Typdeklaration

const emit = defineEmits<{
    
    
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 3.3+：另一种更简洁的语法
const emit = defineEmits<{
    
    
  change: [id: number] // 具名元组语法
  update: [value: string]
}>()

Methode 2 ref + defineExpose-Kompilierungsmakro | übergeordnete Komponente ruft Wert/Methode der untergeordneten Komponente ab

refSie können den echten DOM-Knoten und auch die Instanz der Unterkomponente abrufen. VC
$parentkann die Instanz der übergeordneten Komponente innerhalb der Unterkomponente abrufen

Rufen Sie die Instanz der untergeordneten Komponente im Setup ab.
1. Legen Sie die Eigenschaft ref der untergeordneten Komponente in der übergeordneten Komponente fest.
2. Akzeptieren Sie die Variable mit demselben Namen

//父组件
<Son ref='son'> </son>

<script setup lang="ts">
const son= ref(null);
</script>

Es liegt ein Problem vor: refDie Unterkomponenteninstanz kann abgerufen werden, aber die Unterkomponentendaten können nicht abgerufen werden.
Grund: Die internen Daten der Komponente sind für die Außenwelt geschlossen.
Lösung: Die Komponente defineExpose()stellt den Wert oder die Methode für die Außenwelt bereit

//子组件暴露
defineExpose({
    
    
  money,
})
//父组件使用
<Son ref='son'> </son>

<script setup lang="ts">
const son= ref(null);
conselo.log(son.value);
</script>

Datensynchronisierung von übergeordneten und untergeordneten Komponenten

Das Prinzip des vue2 V-Modells

V-Modell grammatikalischer Zucker = Requisiten (Vater an Kind) + Bindungsereignis-Listener @input/trigger Ereignis-Listener emittieren (Kind an Vater)

Implementierungsprinzip des V-Modells
Das standardmäßig übergebene Attribut ist der Wert und der benutzerdefinierte Ereignisname wird eingegeben

<!--v-model简写-->
<Son v-model="msg" />
<!--原始写法-->
<Son :value="msg" @input= "val => msg=val "/>

Text- und Textarea-Elemente verwenden die Eigenschaft „value“ und das Eingabeereignis;
Kontrollkästchen und Radio verwenden die Eigenschaft „checked“ und das Ereignis „change“;
das Feld „select“ verwendet die Eigenschaft „value“ und das Ereignis „change“.

Prinzip des Vue2-Synchronisierungsmodifikators

Synchronisierungsmodifikator = Requisiten (Vater an Kind) + Bindungsereignis-Listener @update: Eigenschaftsname/Trigger-Ereignis-Listener emittieren (Kind an Vater)

.syncModifikator kann die gleiche Funktion wie und erreichen v-modelund ist v-modelflexibler als.
v-modelEine Komponente kann nur eine verwenden .syncund mehrere haben.

xxx.syncPrinzip
①Die übergeordnete Komponente übergibt Requisiten an die untergeordnete Komponente: Eigenschaftsname
②Ein benutzerdefiniertes Ereignis ist an die aktuelle untergeordnete Komponente gebunden. Der Ereignisname ist der Wert update:属性名, den das Ereignis aktualisiertxxx

// 正常父传子： 
<son :info="str" :title="str2"></son>

// 加上sync之后父传子（.sync没有数量限制）： 
<son :info.sync="str" .title.sync="str2"></son> 

// 它等价于
<son
:info="str" @update:info="val=>str=val"
:title="str2" @update:title="val=>str2=val">
</son> 

//子组件emit触发事件
this.$emit('update:info',this.info + ",我现在被子组件emit了")

vue3 V-Modell-Prinzip

Das Prinzip von vue3 v-modelist das Prinzip der Modifikatoren in vue2 sync, und die Eigenschaften sind dieselben: Eine Komponente kann mehrere haben v-model.

Binden Sie mehrere V-Modelle: v-model:value = 值Jedes V-Modell hat keinen Einfluss auf das andere.

<Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>

Vorfahrenkomponenten übergeben Werte an Nachkommenkomponenten

bereitstellen/injizieren

• provideDaten bereitstellen: Geben Sie die Daten oder Methoden an, die Sie den Nachkommenkomponenten bereitstellen möchten
• injectinjectDaten in Komponenten einfügen: Verwenden Sie die empfangenen Daten oder Methoden in allen Nachkommenkomponenten provide. Unabhängig davon, wie tief die Komponenten verschachtelt sind, können sie direkt verwendet werden

Verwendung in vue2

injectdata/propsVorher initialisieren, providedanach initialisieren data/props, beim Einfügen von Inhalten den Inhalt in die aktuelle VC einfügen, den Schlüssel __provideso konfigurieren
inject, dass er zuerst den Inhalt in der aktuellen Komponente liest ( __provide), wenn er nicht gelesen werden kann, lesen Sie ihn aus der übergeordneten Komponente und suchen Sie den endgültigen Inhalt und speichern Sie es in der aktuellen Instanz (vc), sodass der durch inject eingefügte Inhalt direkt über diese gelesen werden kann.

Vue reagiert nicht auf Variablen in Provide. Damit die von inject akzeptierten Variablen reagieren können, müssen daher die von Provide selbst bereitgestellten Variablen reagieren.

// 父组件
export default {
    
    
  provide: {
    
    
    name: "父组件数据",
    say() {
    
    
      console.log("say say say");
    },
  },
  // 当需要用到this的时候需要使用函数形式，调用时this指向当前组件
  provide() {
    
    
    return {
    
    
      todoLength: this.todos.length
    }
  },
}

// 子组件
<template>
  <div>
    <div>provide inject传递过来的数据： {
    
    {
    
     name }}</div>
    <div>provide inject传递过来的方法<button @click="say">say</button></div>
  </div>
</template>

<script>
export default {
    
    
  inject: ['name', 'say'],
  },
}
</script>

Verwendung in vue3

• provide()Bei der Methode muss der erste Parameter ein eindeutiger Bezeichner sein (derselbe Name wie die Variable innerhalb der Komponente ist nicht zulässig), und der zweite Parameter sind die von der Vorgängerkomponente bereitgestellten Daten (Wert/Methode).
• inject()Bei der Methode sind die ersten Daten die Identität, und die von der Vorfahrenkomponente bereitgestellten Daten werden über die Identität abgerufen, und der zweite Parameter ist der Standardwert. Wenn die Identitätsdaten nicht von der Vorfahrenkomponente abgerufen werden, wird der Standardwert verwendet .

//祖先组件
<script setup lang="ts">
import {
    
    provide] from 'vue'
const age = ref(18);
provide("keyName",age )
</script>

//孙子组件
<script setup lang="ts">
import {
    
    inject} from 'vue';
let car = inject('keyName'); // car为ref引用对象
console.log(car.value)
const updateCar = ()=>{
    
    
   car.value  = '自行车';
}
</script>

Erläuterung
1. Im obigen Fall verweisen die in der Enkelkomponente empfangenen Daten und die von der Vorgängerkomponente injizierten Daten auf dasselbe Referenzreferenzobjekt . Wenn Sie also das Auto in der Enkelkomponente ändern, werden auch die gleichnamigen Daten in der Vorgängerkomponente geändert. Ändern Sie den Wert in der Vorgängerkomponente, und die Enkelkomponente reagiert ebenfalls.

2. In der Vorlage verwendet, können Sie die Parameteridentifikation direkt verwenden

<script setup lang="ts">
import {
    
    inject} from 'vue';
</script>
<template>
	<span>{
    
    {
    
    keyName}}</span>
</template>