So verwenden Sie den Vue3-Setup-Syntaxzucker

1. Einführung in die Setup-Syntax Sugar

Sie können die Setup-Syntax Sugar direkt verwenden, indem Sie das Setup-Attribut im Skript-Tag hinzufügen.

Nach der Verwendung von Setup-Syntaxzucker muss keine Setup-Funktion geschrieben werden; Komponenten müssen nur eingeführt und nicht registriert werden; Eigenschaften und Methoden müssen nicht zurückgegeben werden und können direkt in verwendet werden Vorlage.

	<template>
		<my-component @click="func" :numb="numb"></my-component>
	</template>
	<script lang="ts" setup>
		import {ref} from &#39;vue&#39;;
		import myComponent from &#39;@/component/myComponent.vue&#39;;
		//此时注册的变量或方法可以直接在template中使用而不需要导出
		const numb = ref(0);
		let func = ()=>{
			numb.value++;
		}
	</script>

2. Neue API im Setup-Syntaxzucker

• defineProps: Untergeordnete Komponente empfängt Requisiten von übergeordneter Komponente

• defineEmits: Untergeordnete Komponente ruft Methoden in übergeordneter Komponente auf

• defineExpose: Belichtungseigenschaften für untergeordnete Komponenten können abgerufen werden in der übergeordneten Komponente 2.1defineProps

Code der übergeordneten Komponente

Parent Component Code

	<template>
		<my-component @click="func" :numb="numb"></my-component>
	</template>
	<script lang="ts" setup>
		import {ref} from &#39;vue&#39;;
		import myComponent from &#39;@/components/myComponent.vue&#39;;
		const numb = ref(0);
		let func = ()=>{
			numb.value++;
		}
	</script>

2.3defineExpose

Code der untergeordneten Komponente

	<template>
		<div>{{numb}}</div>
	</template>
	<script lang="ts" setup>
		import {defineProps} from &#39;vue&#39;;
		defineProps({
			numb:{
				type:Number,
				default:NaN
			}
		})
	</script>

Code der übergeordneten Komponente

	<template>
		<div>{{numb}}</div>
		<button @click="onClickButton">数值加1</button>
	</template>
	<script lang="ts" setup>
		import {defineProps,defineEmits} from &#39;vue&#39;;
		defineProps({
			numb:{
				type:Number,
				default:NaN
			}
		})
		const emit = defineEmits([&#39;addNumb&#39;]);
		const onClickButton = ()=>{
			//emit(父组件中的自定义方法,参数一,参数二,...)
			emit("addNumb");
		}
	</script>

Ergänzung: Wird mit gewöhnlichem Skript verwendet

5101c0cdbdc49998c642c71f6b6410a8 In Situationen, in denen dies erforderlich ist, kann ein gewöhnliches e58c6cf2a6441afbe22ae07d07d1b07a verwendet werden.

Im be037f1db418a760eb29637b48c9d49b deklarierte Optionen, wie zum Beispiel inheritAttrs oder benutzerdefinierte Optionen, die durch Plugins aktiviert werden.

Deklarieren Sie benannte Exporte.

Nebeneffekte ausführen oder Objekte erstellen, die nur einmal ausgeführt werden müssen.

	<template>
		<my-component @addNumb="func" :numb="numb"></my-component>
	</template>
	<script lang="ts" setup>
		import {ref} from &#39;vue&#39;;
		import myComponent from &#39;@/components/myComponent.vue&#39;;
		const numb = ref(0);
		let func = ()=>{
			numb.value++;
		}
	</script>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Vue3-Setup-Syntaxzucker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!