欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2023-03-09 12:09:35|栏目:vue|点击:

前言

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>

总结

上一篇:程序员应该知道的vuex冷门小技巧(超好用)

栏    目:vue

下一篇:vue-cli脚手架搭建的项目去除eslint验证的方法

本文标题:vue3更新的setup语法糖实例详解

本文地址:http://www.codeinn.net/misctech/227138.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有