setup语法糖的改变

<script setup>是在单文件组件中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时，该语法是默认推荐的，相比与普通的<script>语法，它具有更多优势：
更少的样式模板，更简洁的代码
能够使用纯Typescript声明props和自定义事件
更好的运行时性能（其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象）
更好的ide类型推导性能（减少了语言服务器从代码中抽取类型的工作）
root，和$parent都能访问父组件的属性和方法，区别在于如果存在多级子组件，通过parent 访问得到的是它最近一级的
父组件，通过root 访问得到的是根父组件。通过在子组件标签定义 ref 属性，在父组件中可以使用$refs 访问子组件实例。

用法的改变

第一：

旧版得注册，新版不用注册

注册：components：{

        组件名称

}

第二：export defalut不用写了

第三：响应式：return{

}，setup（）{}也 不用写了

第四：局部指令的使用

<Navbar v-kerwin-dir>
const vKerwinDir=(el)=>{
el.style.background="yellow"
}

旧版
props:{
    title:{
type:String,
    default:"000000"
    }
},
setup(props){

}
新版
const props=defineProps({
    title:{
    type:String,
    default:"000000"
}
})
console.log(props.title)//传过来的属性的使用

第五：动态组件后不能用变量

 

注意：在optionAPI中进行通信

this.$emit

在组合式API中

setup（props，{emit}）{

}

在setup语法糖中

const emit=defineEmits（[]）

const

父组件
<Child @right="handleRight">
const handleRight=(value)=>{
console.log("app",value)
}

子组件中



const emit= defineEmits(["right"])
const handleHome=()=>{
emit("right","来自子组件的通信")
}