【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>
### Vue3 Setup 语法糖详解 #### 一、什么是Setup语法糖Vue3引入了一种新的API风格——组合式API(Composition API),它提供了更好的逻辑复用方式以及更清晰的状态管理机制。为了简化这种新特性的使用Vue团队进一步推出了`<script setup>`标签形式的语法糖[^1]。 #### 二、如何使用Setup语法糖? 当采用此语法编写组件时,默认情况下所有的声明都是公开可见并可以直接用于模板中的;无需再显式导出任何东西到`setup()`函数返回对象里去。下面是一个简单的例子展示怎样利用这个特性创建一个计数器应用: ```html <!-- Counter.vue --> <script setup> import { ref } from &#39;vue&#39; const count = ref(0) function increment() { count.value++ } </script> <template> <button @click="increment">{{ count }}</button> </template> ``` 在这个案例中,通过`ref`定义了一个可响应式的变量`count`,并通过方法`increment`实现了点击按钮增加数值的功能。值得注意的是,在这里并没有像传统做法那样调用`defineComponent`或是在选项式API下的`data`, `methods`等属性内做相应配置,而是直接在脚本部分进行了操作。 #### 三、与React Hooks对比 对于拥有React开发背景的人来说,可能会发现组合式函数的概念类似于自定义Hooks。确实两者存在一定的相似之处,尤其是在处理复杂业务场景方面都表现出了强大的灵活性。不过需要注意的是,由于Vue具备细粒度级别的反应性追踪机制,因此即使看起来功能相近,但在内部实现原理上还是有着根本区别的[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值