vue3 setup语法糖

vue3 setup语法糖

目录：

1. setup语法糖简介
2. setup语法糖中新增的api
   2-1.defineProps
   2-2.defineEmits
   2-3.defineExpose

1.setup语法糖简介

直接在 script 标签中添加 setup 属性就可以直接使用 setup 语法糖
使用setup 语法糖后 不用写setup 函数 组件只需要引入不需要注册 属性和方法也不需要在返回 可以直接在 template 模块中使用

<template>
	<my-component @click="func" :numb="numb"></my-component>
</template>
<script lang="ts" setup>
	import {
   ref} from "vue";
	import myComponent from "@/component/myComponent.vue";
	// 此时注册的变量或方法可以直接在 template 中使用而不需要导出
	const numb = ref(0);
	let func = () => {
   
		numb.value ++;
	}
</script>

2. setup语法糖中新增的api

defineProps：子组件接收父组件中传来的props
defineEmits：子组件调用父组件中的方法
defineExpose：子组件暴露属性，可以在父组件中拿到

2-1. defineProps

父组件代码

<template>
	<my-component @click="func" :numb="numb"></my-component>
</template>
<script lang="ts"