vue3 セットアップ構文シュガーの使用方法

1. セットアップ構文シュガーの概要

setup 属性を script タグに追加することで、セットアップ構文シュガーを直接使用できます。

setup 構文シュガーを使用した後は、 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. セットアップ構文の新しい 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>

補足: 通常のスクリプトで使用します

5101c0cdbdc49998c642c71f6b6410a8 は通常の3f1c4e4b6b16bbbd69b2ee476dc4f83a で使用できます。通常の <script> は、これらが必要な状況で使用できます。 </script>

5101c0cdbdc49998c642c71f6b6410a8 で宣言できないオプション (inheritAttrs やプラグインを通じて有効になるカスタム オプションなど)
名前付きエクスポートを宣言
副作用を実行するか、一度だけ実行する必要があるオブジェクトを作成します

• <script>
      // 普通 <script>, 在模块范围下执行(只执行一次)
      runSideEffectOnce()
      
      // 声明额外的选项
      export default {
        inheritAttrs: false,
        customOptions: {}
      }
  </script>
  
  <script setup>
      // 在 setup() 作用域中执行 (对每个实例皆如此)
  </script>

以上がvue3 セットアップ構文シュガーの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。