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 'vue';
import myComponent from '@/component/myComponent.vue';
//此时注册的变量或方法可以直接在template中使用而不需要导出
const numb = ref(0);
let func = ()=>{
numb.value++;
}
</script>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
2.3defineExpose <template>
<my-component @click="func" :numb="numb"></my-component>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import myComponent from '@/components/myComponent.vue';
const numb = ref(0);
let func = ()=>{
numb.value++;
}
</script>Nach dem Login kopieren
Code der untergeordneten Komponente
<template>
<div>{{numb}}</div>
</template>
<script lang="ts" setup>
import {defineProps} from 'vue';
defineProps({
numb:{
type:Number,
default:NaN
}
})
</script>Ergänzung: Wird mit gewöhnlichem Skript verwendet <template>
<div>{{numb}}</div>
<button @click="onClickButton">数值加1</button>
</template>
<script lang="ts" setup>
import {defineProps,defineEmits} from 'vue';
defineProps({
numb:{
type:Number,
default:NaN
}
})
const emit = defineEmits(['addNumb']);
const onClickButton = ()=>{
//emit(父组件中的自定义方法,参数一,参数二,...)
emit("addNumb");
}
</script>Nach dem Login kopieren
