Comment utiliser le sucre de syntaxe de configuration de vue3

1. Introduction au sucre de syntaxe de configuration

Vous pouvez utiliser le sucre de syntaxe de configuration directement en ajoutant l'attribut setup dans la balise de script.

Après avoir utilisé le sucre de syntaxe de configuration, il n'est pas nécessaire d'écrire une fonction de configuration ; les composants doivent seulement être introduits et n'ont pas besoin d'être enregistrés ; les propriétés et les méthodes n'ont pas besoin d'être renvoyées et peuvent être utilisées directement dans ; le modèle.

	<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. Nouvelle API dans la syntaxe de configuration sugar

• defineProps : le composant enfant reçoit les accessoires du composant parent

• defineEmits : le composant enfant appelle les méthodes du composant parent

• defineExpose : les propriétés exposées du composant enfant peuvent être obtenues dans le composant parent

2.1defineProps

Code du composant parent

	<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>

Code du composant enfant

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

2.2defineEmits

Code du composant enfant

	<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>

Code du composant parent

	<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>

2.3defineExpose

Code du composant enfant

	<template>
		<div>子组件中的值{{numb}}</div>
		<button @click="onClickButton">数值加1</button>
	</template>
	<script lang="ts" setup>
		import {ref,defineExpose} from &#39;vue&#39;;
		let numb = ref(0);
		function onClickButton(){
			numb.value++;	
		}
		//暴露出子组件中的属性
		defineExpose({
			numb 
		})
	</script>

Code du composant parent

	<template>
		<my-comp ref="myComponent"></my-comp>
		<button @click="onClickButton">获取子组件中暴露的值</button>
	</template>
	<script lang="ts" setup>
		import {ref} from &#39;vue&#39;;
		import myComp from &#39;@/components/myComponent.vue&#39;;
		//注册ref，获取组件
		const myComponent = ref();
		function onClickButton(){
			//在组件的value属性中获取暴露的值
			console.log(myComponent.value.numb)  //0
		}
		//注意：在生命周期中使用或事件中使用都可以获取到值，
		//但在setup中立即使用为undefined
		console.log(myComponent.value.numb)  //undefined
		const init = ()=>{
			console.log(myComponent.value.numb)  //undefined
		}
		init()
		onMounted(()=>{
			console.log(myComponent.value.numb)  //0
		})
	</script>

Supplément : utilisé avec un script ordinaire

2d1858297e72f716b2504a0c5161edaf peut être utilisé avec un 3f1c4e4b6b16bbbd69b2ee476dc4f83a Un 3f1c4e4b6b16bbbd69b2ee476dc4f83a ordinaire peut être utilisé dans les situations où ils sont nécessaires.

• Options déclarées dans 2d1858297e72f716b2504a0c5161edaf, telles que l'héritageAttrs ou les options personnalisées activées via des plugins

• Déclarez les exportations nommées

• Exécutez des effets secondaires ou créez des objets qui ne doivent être exécutés qu'une seule fois

<script>
    // 普通 <script>, 在模块范围下执行(只执行一次)
    runSideEffectOnce()
    
    // 声明额外的选项
    export default {
      inheritAttrs: false,
      customOptions: {}
    }
</script>

<script setup>
    // 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!