vue3更新的setup语法糖实例详解
短信预约 -IT技能 免费直播动态提醒
前言
vue3最近更新了一个setup语法糖，这两天才看到，使用起来雀食很甜，特发个帖子记录下
语法糖用法：
// 将 `setup` attribute 添加到 `<script>` 代码块上
// 里面的代码会被编译成组件 `setup()` 函数的内容
// 就是这么简单明了
<script setup>
</script>语法糖带来的体验
一、组件自动注册
// 无需使用components，引入即注册，起飞有没有
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
<MyComponent />
</template>二、属性及方法无需return
// 当使用 `<script setup>` 的时候，任何在 `<script setup>` 声明的顶层的绑定
// (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用
import { ref } from 'vue'
<script setup>
// 变量
let msg = ref('Hello!')
// 函数
function log() {
msg.value = "World!";
console.log(msg)
}
</script>
<template>
<div @click="log">{{ msg }}</div>
</template>三、自动将文件名定义为组件的name属性
语法糖提供的API
在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits
1、defineProps
<script setup>
const props = defineProps({
foo: String
})
</script>2、defineEmits
<script setup>
const emit = defineEmits(['change', 'delete'])
// emit('change', '1111')
</script>3、defineExpose
如果在父组件中通过ref='xxx’的方法来获取子组件实例， 而且子组件使用了<script setup>, 则子组件的数据需要用defineExpose 的方式导出，否则不会暴露其属性
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script><script setup>可以与普通的 <script> 一起使用
<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
// 声明额外的选项、例如自定义组件名
export default {
name: '组件1'
}
</script>
<script setup>
// code
</script>总结
到此这篇关于vue3更新的setup语法糖的文章就介绍到这了,更多相关vue3 setup语法糖内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
