07.Vue3的必背技能点（六）：＜script setup＞语法糖、defineProps、defineEmits、defineExpose；

已于 2024-02-28 11:57:03 修改
阅读量101 收藏
点赞数
分类专栏： VUE3从0到1渐近式学习 文章标签： 前端 vue javascript
于 2024-01-31 17:33:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44121341/article/details/135958762
版权
本文详细介绍了Vue3中的<script setup>语法糖，包括其基本定义和相较于普通<script>的优势，如简化代码和增强Typescript支持。接着，讨论了defineProps和defineEmits的使用，它们分别用于声明props和自定义事件，并通过withDefaults宏辅助设置默认值。最后，解释了defineExpose的作用，即如何将子组件的属性和方法暴露以实现父子组件间的通信。
摘要由CSDN通过智能技术生成

一、<script setup>语法糖；

1.基本定义；

  • 单文件组件（SFC）中使用组合式API使用的语法糖；

  • import导入、响应式数据、变量、函数声明 在模板中可以直接使用；

2.相比普通的 <script> 优势；

  • 更少的样板内容，更简洁的代码；

  • 能够使用纯 Typescript 声明 props 和 自定义事件；

<script setup>

// 引入组合式api
import { ref } from 'vue';

// 引入组件
import childComponent from './components/child.vue';

// 定义ref数据
let personName = ref('bob');

// 定义函数
function getName() {
  console.log('hello world!')
}
</script>
 
<template>
  <div id="app">
了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端小砖er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue3 - ＜script setup＞ 语法糖下，实现 “父子“ 组件传参通信（defineProps / defineEmits / defineExpose）使用方法的详细示例教程
王佳斌
02-13 2116
vue3 setup 组件传参，vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose），vue3 setup 父组件向子组件传递参数、方法，vue3的setup语法糖之ts下的组件传参，vue3--setup--父子组件传参-监听，vue3 组件通信，vue3setup父组件向子组件传递参数，vue3 setup语法下子组件向父组件传参，vue3组件通信方式，Vue3 - script setup> 语法糖下怎么组件互相传参，vue3中setup语法
Vue3-新特性defineOptions和defineModel
weixin_46479909的博客
11-24 3088
为了解决这一问题，引入了defineProps与defineEmits这两个宏，但这只解决了props与emits这两个属性。如果要定义其他的平级属性，还是得回到最原始的用法--就再添加一个普通的标签。在Vue3中，自定义组件上使用v-model，相当于传递一个modelValue属性，同时触发update:modelValue事件。问题：用了后，就无法添加与其平级的属性了，比如定义组件的name或其他自定义的属性。我们需要先定义props，再定义emits。
【vue】defineModel在vue3.4中的最新用法和详解
最新发布
stay hungry, stay foolish
01-29 9386
尤大发布了vue3.4版本，这个版本主要对一些实验性特性的改进（比如），大量重写了模板编译器并重构了响应式系统，可以说是大大提升了运行速度和效率。
vue3中setup语法糖的一些方法的使用总结记录
weixin_45547638的博客
10-11 2836
基本使用：setup写在标签script上，script setup 标签中无需return 变量、函数。vue提供了provide和inject帮助我们解决多层次嵌套通信问题。在目录src下新建文件夹 hooks ==> index.ts。
vue3中＜script setup＞ 和 setup函数的区别
Huangxianlong的博客
04-22 1263
vue3中＜script setup＞ 和 setup函数的区别
vue3 组合式风格setup笔记（定义变量、函数 data和method的setup写法）
mashirokayo的博客
09-29 3099
vue3 组合式风格 变量定义(对应data)、函数定义（对应method）
Vue3 - ＜script setup＞ 单文件组件语法糖的使用教程示例 （SFC）
王佳斌
11-12 1833
vue3官方文档，Vue3.0的新语法糖-script setup，VUE3的 单文件组件 `script setup` 理解与实际上手案例，vue3中的单文件组件script setup详解，vue3中单文件组件``实例详解，Vue3之单文件组件(SFC)，初识vue3 之单文件组件 script setup，...script setup 语法——单文件组件，Vue3 script-setup 使用指南，vue3 script-setup语法糖，Vue3拒绝写return,用
vue3中的单文件组件＜script setup＞详解
热门推荐
丑小鸭变黑天鹅的博客
04-15 3万+
vue3中的单文件组件<script setup>详解一、相比普通script语法的优势二、基本语法三、响应式四、使用组件五、使用自定义指令六、defineProps 和 defineEmits七、defineExpose八、useSlots 和 useAttrs九、顶层 await 一、相比普通script语法的优势 <script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势 更少的
vue3 Ts script-setup 语法糖 父子组件通信 使用sync,defineEmit,defineProps,defineExpose
m0_67394360的博客
03-06 647
较比更加简洁化 真香～ 父组件 <template> <div class="point-dist"> <div class="point-dist-top"> <div class="point-msg-top"> <point-map ref="mapBox" // 绑定ref 通过ref取子组件方法 参数 @getMapData="getMapData"
vue3 script setup 语法糖用了才知道有多爽 (六)
YZRHANYU的博客
03-21 451
vue3 script setup 语法糖用了才知道有多爽 (六) script setup的分析和使用 Vue3 script setup 语法糖 中对于 TypeScript 的支持,支队 props/emit 的运行时声明和类型时声明,以及使用类型声明时 props 默认值的配置方式
vue3 语法糖 等 零碎知识点 记录
u014105655的博客
07-13 225
vue3 知识点记录
vue3 实验属性 script setup ＜script setup＞
m0_37824255的博客
05-29 1543
公司一直使用的都是vue2.x，在vue conf 中看尤大演示 script setup 让我眼前一亮，这种简便语法太吸引了。 示例 在不使用script setup,我们代码是： <template> <h1 v-text="count"></h1> <p v-text="double"></p> <button @click="add">count++</button> </template> &
script setup 影响methods选项导出函数
jiyanglin的博客
01-01 2319
以前我们用选项式的methods定义组件的函数，父组件可以直接通过子组件对象访问methods中定义的方法。 比如某文件Comp.vue定义了组件，其中包含一个funcomp函数 <template> <div> comp1 </div> </template> <script> export default { methods: { funcomp() { console.log("xx");
Vue3 script-setup 使用指南
张三军的博客
02-08 1429
vue 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新...
Vue3 子组件如何抛出事件（$emit 在 setup()、＜script setup＞ 中使用）
卡尔特斯
08-01 4557
vue3 还有一种便捷写法，上面几种写法中都支持使用。//抛出success事件。'自带参数（可选）''自带参数（可选）''自带参数（可选）'
Vue（setup函数介绍）
影子
08-26 1398
Composition Api setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。 调用时机： setup函数会在beforeCreate钩子之前被调用 返回值 如果setup返回一个对象，则对象的属性可以在组件模板中被访问 参数 接收俩个参数 setup.vue <template> <div> setup </div> </template> <script> export defa.
＜script setup＞vue3双向绑定和事件
TianQiWanLaiQiu的博客
09-01 1406
<template> <div class="page"> <p>{{state.num}}</p> <button @click="btn">点击</button> </div> </template> <script setup> import { reactive } from "@vue/reactivity"; const state = reactive({.
vue3 <script setup>语法糖中 父组件如何调用子组件的方法举个例子
10-22
在Vue3中，可以使用组件的ref属性来获取子组件的实例，然后通过该实例调用子组件的方法。下面是一个例子： 假设我们有一个父组件Parent和一个子组件Child，Child组件中有一个changeNum方法，我们想在Parent组件中调用该方法。 Child组件代码如下： ``` <template> <div> <p>子组件中的数字：{{ num }}</p> </div> </template> <script setup> import { ref } from 'vue' let num = ref(0) function changeNum() { num.value++ } export { num, changeNum } </script> ``` Parent组件代码如下： ``` <template> <div> <p>父组件中的数字：{{ num }}</p> <Child ref="child" /> <button @click="changeChildNum">点击调用子组件中的方法</button> </div> </template> <script setup> import Child from './Child.vue' import { ref } from 'vue' let num = ref(0) let child = ref() function changeChildNum() { child.value.changeNum() } export { num, child, changeChildNum } </script> ``` 在Parent组件中，我们首先引入了Child组件，并使用ref属性获取了Child组件的实例。然后在changeChildNum方法中，通过child.value.changeNum()调用了Child组件中的changeNum方法。 注意，在使用ref属性获取子组件实例时，需要在子组件的标签上添加ref属性，如上例中的<Child ref="child" />。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小砖er

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值