【Vue3中setup语法糖下常用API使用方法】

defineProps 、 defineEmits、defineExpose 都是只在 setup语法糖 中才能使用的编译器宏。他们不需要导入是直接可用的

一、Props父 >> 子组件传递，使用defineProps

// Parent.vue
<tempalte>
	<Child :data="toChild" />
</template>

<script setup>
	const toChild = reactive({
		msg: 'hello composition'
	})
</script>

// Child.vue
<script setup>
	const props = defineProps({
		data: {
			msg: String
		}
	})
</script>

二、Emit子 >> 父组件传递，使用defineEmits

// Parent.vue
<tempalte>
	<Child @toParent="emitChange" />
</template>

<script setup>
	const emitChange = (data) => {console.log(data)}
</script>

// Child.vue
<tempalte>
	<button @click="pushMsg">发送</button>
</template>

<script setup>
	const emits = defineEmits(['toParent'])
	const pushMsg = () => {
		emits('toParent', '来自child的问候')
	}
</script>

三、defineExpose

使用setup语法糖，组件是默认关闭的，父组件无法通过ref和$parent获取到组件的组件的公开实例，为了在setup语法糖下明确要暴露出去的属性，使用defineExpose编译器宏

// Parent.vue
<tempalte>
	<Child ref="getChild" />
</template>

<script setup>
	import {ref, onMounted} from 'vue'
	const getChild = ref(null)
	onMounted(() => {
		gteChild.value.helloParent()
	})
</script>

// Child.vue
<script setup>
	const helloParent = () => {
		console.log('child')
	}
	defineExpose({helloParent})
</script>

四、Provide/Inject

// Parent.vue
<script setup>
	import {reactive, provide} from 'vue'
	const content = reactive({
		msg: '来自祖辈的轻抚'
	})
	provide('fromParent', content)
</script>

// 子组件或孙组件
<script setup>
	import {inject} from 'vue'
	const content = inject('fromParent')
</script>

五、异步组件

异步组件下父组件无法通过ref获取子组件实例，(T-T)，困扰许久

// Parent.vue
<tempalte>
	<Child />
	<Child2 />
</template>

<script setup>
	import { defineAsyncComponent } from 'vue'
	import ErrorComponent from './components/ErrorComponent.vue'
	import LoadingComponent from './components/LoadingComponent.vue'
	
	// 不带选项的异步组件
	const Child = defineAsyncComponent(() => import('./Child.vue'))
	
	// 带选项的异步组件
	const Child2 = defineAsyncComponent({
	  loader: () => import('./Child2.vue'), // 需要加载的组件
	  delay: 200, // 展示加载时组件的延时时间。默认值是 200 (毫秒)
	  timeout: 3000, // 超时时间，如果提供了超时时间且组件加载也超时了，则使用失败组件
	  errorComponent: ErrorComponent, // 加载失败时使用的组件
	  loadingComponent: LoadingComponent // 异步组件加载时使用的组件
	})
		
</script>

六、useSlots和useAttrs

<script setup>
	import { useSlots, useAttrs } from 'vue'
	
	const slots = useSlots()
	const attrs = useAttrs()
</script>