vue3 setup语法糖,vue3的setup函数
Vue3上线很久了，很多朋友应该都已经用过vue3了。下面文章主要介绍vue3更新的关于设置语法sugar的相关信息，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
目录
前言语法糖用法：语法糖带来的体验一、组件自动注册二。不需要返回属性和方法。将文件名自动定义为组件1、defineProps2、defineEmits3和defineExpose summary的名称属性。
前言
Vue3最近更新了一个设置语法糖果，是我这两天才看到的。用起来很甜，所以想发个帖子记录一下。
语法糖用法：
//将setup `属性添加到脚本代码块中
//里面的代码会被编译成组件` setup()`函数的内容。
//就这么简单明了
脚本设置
/脚本
语法糖带来的体验
一、组件自动注册
//不需要使用组件。介绍的时候可以注册。有出发的吗？
脚本设置
从导入MyComponent。/MyComponent.vue
/脚本
模板
我的组件/
/模板
二、属性及方法无需return
//当使用“scriptsetup”时，“scriptsetup”声明顶级的任何绑定
//(包括变量、函数声明、导入内容)可以直接在模板中使用。
从“vue”导入{ ref }
脚本设置
//变量
let msg=ref(Hello！)
//函数
函数日志(){
msg.value=World！；
console.log(消息)
}
/脚本
模板
div @ click= log“{ msg } }/div
/模板
三、自动将文件名定义为组件的name属性
语法糖提供的API
在脚本设置中，必须使用defineProps和defineEmitsAPI来声明Props和emissions。
1、defineProps
脚本设置
const props=defineProps({
字符串
})
/脚本
2、defineEmits
脚本设置
const emit=defineEmits([change ， delete])
//发出( change ， 1111 )
/脚本
3、defineExpose
如果子组件实例是通过父组件中ref=xxx 的方法获取的，并且子组件使用脚本设置，则子组件的数据需要通过defineExpose导出，否则其属性不会被公开。
脚本设置
从“vue”导入{ ref }
常数a=1
常数b=ref(2)
defineExpose({
一，
b
})
/脚本
script setup可以与普通的script一起使用
脚本
//普通脚本，在模块范围内执行(只执行一次)
//声明附加选项，如自定义组件名称
导出默认值{
名称：“组件1”
}
/脚本
脚本设置
//代码
/脚本
总结
这就是这篇关于vue3更新的设置语法sugar的文章。请搜索我们以前的文章或继续浏览下面的相关文章，了解更多关于Vue3的vue3setup语法糖的信息。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。