vue3+script-setup与组合式Api的区别

1.当使用 <script setup>的时候，任何在<script setup>声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用
2.props的定义

const props = defineProps({
  foo: String,
  value:{
    type:Number,
    require:true
    }
  })

3.组件通信：
举例：点击子组件的value+1按钮修改父组件的value值
*

<!--  html-->
 <button @click="input">value+1</button>       

//vue文件
const props = defineProps({
  value:{
    type:Number,
    require:true
    }
  })
const emit=defineEmits(['update:value','update:value2'])   //声明要触发的事件
const input=()=>{
  if(props.value){
    emit("update:value",props.value+1)          //子组件触发一个input事件
  }
}

//父组件监听子组件触发的update:value事件
//html部分
<Button :value="value" @update:value="value=$.event">
等价于
<Button v-model:value="value"/>

父组件的js部分
<script setup lang="ts">
const value=ref<Number>(0)
</script>