1.setup语法糖简介
直接在script标签中添加setup属性就可以直接使用setup语法糖了。
使用setup语法糖后，不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用。
<template> <my-component @click="func" :numb="numb"></my-component> </template> <script 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.1defineProps
父组件代码
<template> <my-component @click="func" :numb="numb"></my-component> </template> <script setup> import {ref} from 'vue'; import myComponent from '@/components/myComponent.vue'; const numb = ref(0); let func = ()=>{ numb.value++; } </script>
子组件代码
<template> <div>{{numb}}</div> </template> <script setup> import {defineProps} from 'vue'; defineProps({ numb:{ type:Number, default:NaN } }) </script>
