vue3更新的setup语法糖实例详解

目录
  • 前言
  • 语法糖用法：
  • 语法糖带来的体验
    • 一、组件自动注册
    • 二、属性及方法无需return
    • 三、自动将文件名定义为组件的name属性
      • 1、defineProps
      • 2、defineEmits
      • 3、defineExpose
  • 总结

前言

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语法糖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3中SetUp函数的参数props、context详解

    Vue3中SetUp函数的参数props、context详解

    1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接收. 包含配置声明并传入的所有的属性的对象 也就是说:如果你想通过props的方式输出父组件传递给子组件的值. 你需要使用props进行接收配置.即props:{......} 如果你未通过Props进行接受配置,则输出的值是undefined <template> <div class=&

  • vue3.0中setup使用(两种用法)

    一.setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1.setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 2.

  • 强烈推荐!Vue3.2中的setup语法糖

    强烈推荐!Vue3.2中的setup语法糖

    目录 前文 1.什么是setup语法糖 2.使用setup组件自动注册 3.使用setup后新增API 3.1 defineProps 3.2 defineEmits 3.3 defineExpose vue3项目如何开启setup语法糖 总结: 前文 作为一个前端程序员,说起 Vue 3肯定不会陌生,作为时下最火的前端框架之一,很多人将它作为入门框架. 但是尽管 Vue 3很久之前就已经开始投入使用,也不免会有人抱怨 Vue 3的知识点太多太杂,更新太快.这不,最近 Vue 3又定稿了一项新技

  • vue3 setup() 高级用法示例详解

    vue3 setup() 高级用法示例详解

    目录 一.选项式API 和 组合式API 区别 二.setup 具体怎么用? 2.1.setup 什么时候执行? 2.2.setup 数据和方法如何使用? 2.3.setup 内部有 this 吗? 2.5.setup与钩子函数关系 三.setup 参数 3.1.props 3.2.context 四.setup 特性总结 本篇文章干货较多,建议收藏! 从 vue2 升级到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的选项式API.由于选项式API一个变量

  • 前端vue3 setup使用教程

    前端vue3 setup使用教程

    目录 1.简单使用 2.修改setup中的变量值 3.setup形式下的父子组件通信 3.1.父传子 3.2.子传父 3.2.1.子组件调用父组件方法 3.2.2.子组件向父组件传递数据 4.setup中使用生命周期函数 vue3 中新增了 setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题.即 vue 中 data.computed.methods.watch 等内容非常多以后,同一业务逻辑的 data 中的数据和 methods 中的方法在 vue 文件中“相隔甚远”

  • vue3:setup的两个注意点详解

    vue3:setup的两个注意点详解

    目录 在vue2中 在vue3中 setup的注意点 setup生命周期在beforecreated之前 setup可以拿到两个参数,props和context context.attrs context.emit context.slot 总结 在vue2中 父组件传属性给子组件 子组件接收属性 如果没有接收,则需要在$attrs里才能收到,缺点是没有对类型作限制,以及使用的时候名字比较长 使用的时候名字比较长 vue2,父组件在子组件里使用插槽 打印插槽里的内容 如果父组件使用了子组件2个插

  • vue3更新的setup语法糖实例详解

    目录 前言 语法糖用法: 语法糖带来的体验 一.组件自动注册 二.属性及方法无需return 三.自动将文件名定义为组件的name属性 1.defineProps 2.defineEmits 3.defineExpose 总结 前言 vue3最近更新了一个setup语法糖,这两天才看到,使用起来雀食很甜,特发个帖子记录下 语法糖用法: // 将 `setup` attribute 添加到 `<script>` 代码块上 // 里面的代码会被编译成组件 `setup()` 函数的内容 // 就是

  • Pinia 的 Setup Stores 语法使用实例详解

    目录 关于大菠萝 最常见的 Option Stores 语法 安利 Setup Stores 语法 如果在 Vue3 的 Setup 语法外使用 Pinia 呢? 关于大菠萝 如果你还不了解 Pinia,那你可以将它理解为 Vuex5(因为 Vuex 5 不会出了),是 Vue3 全家桶成员之一. 这里是它的英文官方文档,中文文档好像不是官方的,并且当前翻译的不全面(比如 Setup Stores 就没有在中文文档中出现),不是很推荐. 最常见的 Option Stores 语法 传递带有 st

  • 一文搞懂Vue3.2中setup语法糖使用

    目录 前言 一.如何使用setup语法糖 二.data数据的使用 三.method方法的使用 四.watchEffect的使用 五.watch的使用 六.computed计算属性的使用 七.props父子传值的使用 八.emit子父传值的使用 九.获取子组件ref变量和defineExpose暴露 十.路由useRoute和useRouter的使用 十一.store仓库的使用 十二.await 的支持 十三.provide 和 inject 祖孙传值 前言 提示:Vue3.2 版本开始才能使用语

  • Vue3组件挂载之创建组件实例详解

    目录 前情提要 mountComponent 创建组件实例 总结 前情提要 上文我们讲解了执行createApp(App).mount('#root')中的mount函数,我们分析了创建虚拟节点的几个方法,以及setRef的执行机制.本文我们继续讲解mountComponent,挂载组件的流程. 本文主要内容 createComponentInstance发生了什么? 如何标准化组件定义的props.emits? 为什么provide提供的值子组件都能访问到? 组件的v-model实现原理.组件

  • Objective-C中的语法糖示例详解

    语法糖 语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用. --维基百科 需要声明的是"语法糖"这个词绝非贬义词,它可以给我带来方便,是一种便捷的写法,编译器会帮我们做转换:而且可以提高开发编码的效率. 通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会,本文在简单的介绍 OC 语法糖的同时也会

  • C# using语法糖图文详解

    C# using语法糖图文详解

    前言 什么是语法糖? (语法糖就是像糖一样的语法-) 语法糖(Syntactic sugar),又名糖衣语法,最早是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的. 通俗点来讲就是简化后的语法,但是其效果和原先语法是一样的,只是更方便我们程序员使用而已. 举个日常生活中简单的例子,使用语法糖之前你想表达今天天气很热:"今天气温好热啊!",用了语法糖后:"天热!", 但是效果是一样的,都能够给别人传达今天天气很热的信息. 很多语言都有语法糖

  • Vue3中v-if和v-for优先级实例详解

    目录 在vue2中应尽量避免二者同时使用 vue3中的改变 结论 补充:注意事项 总结 在vue2中应尽量避免二者同时使用 vue 2.x官方链接 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级. 那么,我们举个例子说明为啥不推荐 <template> <div class="hello"> <div v-for="(item,index) in list" v-if="index ===

  • vue3中的watch和watchEffect实例详解

    vue3中的watch和watchEffect实例详解

    目录 首先总结一下两者的区别: 下面是根据上面的第三点做的一些小实验: 总结 闲来无事,比较了一下 vue3 中的 watch 和 watchEffect,总觉得官方文档没咋说清楚,今天就小小实践了一下. 首先总结一下两者的区别: 1.watch 是惰性执行,而 watchEffect 不是,不考虑 watch 的第三个参数配置的情况,watch 在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而 watchEffect 是在程序执行到此处的时候就立即执行,而后再响应其依赖

  • vue3中setup语法糖下通用的分页插件实例详解

    vue3中setup语法糖下通用的分页插件实例详解

    目录 vue3中setup语法糖下父子组件之间的通信 准备工作 父传子: 子传父: 先给大家介绍下vue3中setup语法糖下通用的分页插件,内容如下所示: 效果 自定义分页插件:PagePlugin.vue <script setup lang="ts"> // total :用来传递数据总条数 // pageSize :每页展示几条数据 // currentPage :当前默认页码 // change-page :页码改变时触发的事件,参数为当前页码 const pro

随机推荐