vue3 설정 구문 설탕을 사용하는 방법

1. 설정 구문 설탕 소개

스크립트 태그에 setup 속성을 추가하면 설정 구문 설탕을 직접 사용할 수 있습니다.

설정 구문 설탕을 사용한 후에는 설정 함수를 작성할 필요가 없습니다. 구성 요소를 도입하고 등록할 필요가 없으며 속성과 메서드를 반환할 필요가 없으며 직접 사용할 수 있습니다. 템플릿.

	<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. 설정 구문 sugar의 새로운 API

• defineProps: 하위 구성 요소는 상위 구성 요소에서 props를 받습니다.

• defineEmits: 상위 구성 요소의 하위 구성 요소 호출 메서드

• defineExpose: 하위 구성 요소 노출 속성을 얻을 수 있습니다. 상위 구성 요소

2.1defineProps

상위 구성 요소 코드

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

하위 구성 요소 코드

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

2.2defineEmits

하위 구성 요소 코드

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

상위 구성 요소 코드

	<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

하위 구성 요소 코드

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

부모 구성 요소 코드

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

보충: 일반 스크립트와 함께 사용

d7b7247d8029f2c18bf139c9b4de217b 필요한 경우에는 일반 3f1c4e4b6b16bbbd69b2ee476dc4f83a를 사용할 수 있습니다.

• inheritAttrs 또는 플러그인을 통해 활성화된 사용자 정의 옵션과 같이 d7b7247d8029f2c18bf139c9b4de217b에 선언된 옵션

• 이름이 지정된 내보내기 선언

• 부작용을 실행하거나 한 번만 실행하면 되는 객체 생성

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

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

위 내용은 vue3 설정 구문 설탕을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!