Vue语法糖<script setup>详解,用最快的方式让你看懂和<script>的区别

Vue语法糖<script setup>详解,用最快的方式让你看懂和<script>的区别

前言

vue3出来已经3年了,但是前两天在百度上搜索有关setup语法糖的细节时,发现很多博客关于语法糖细节部分,还是讲的很粗糙,因此决定自己来写一篇入门的博客,方便大家快速上手。

<script setup>简介

它是Vue3中的一个语法糖,熟悉vue3脚手架的同学,应该一眼就能看出来,vite脚手架默认创建的模板项目中就使用了这个语法糖,说明官网也推荐我们去使用语法糖。

我们都知道,setup是vue3中新增的属性,主要用来解决数据和方法的声明。
<script setup>是setup的替代,我们之前在setup中声明的内容,现在都可以直接迁移。

作用

一言以蔽之,就是简化我们的书写,使用了这个语法糖之后,我们在<script>中声明的任何数据、方法以及import内容都不必再次配置,可以直接在模板<template>中使用。

配置

基础数据

setup语法糖有一个特点,相对于需要return来配置返回内容的setup属性,setup语法糖中可以不用返回。
例如,我简单配置了一个a变量和一个计数方法。

<script setup>
  import { ElButton } from 'element-plus'
  import { reactive, ref } from 'vue'

  let a = ref(3);
  let person = reactive({
    name:'PYR',
    age:17
  });
  const count = function(){
    console.log('我被调用了')
    this.a+=1;
  }
</script>
<span>{{ a }}</span><br/>
  <span>{{ person }}</span><br/>
  <el-button  type="primary" :plain="false" @click="count()">计数</el-button>

页面的效果如图所示:

ps:这里的element-ui不知道为什么失效了,不影响我们理解。

子组件

要配置子组件,我们只需要import引入即可,我们也可以对子组件取别名,这个不多赘述。

 import School from './***ponents/School.vue'
 import School as mySchool from './***ponents/School.vue'

props和emits的配置

关于emits属性,简单的说明一下,在vue3中需要在子组件中对绑定的自定义事件作出声明,否则会给出警告,emits属性即用来配置事件名。

配置props,需要用到一个方法defineProps()。同理emits也有对应的方法defineEmits().

<script setup>
const props = defineProps({
 name: String
})

const emit = defineEmits(['add', 'delete'])
// setup code
</script>

slot插槽和Attrs

这两个学过vue2的话,应该不陌生,slot插槽的作用是在子组件标签中插入dom元素,并且子组件能够配置slot来接受这些元素。Atrr则是接受props未收集的数据,在vue2中,获取的方式为 组件对象.$atrri 。

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

常用的配置就介绍完啦,如果想要更深入的了解setup语法糖,可以自行前往官网查看。

转载请说明出处内容投诉
CSS教程_站长资源网 » Vue语法糖<script setup>详解,用最快的方式让你看懂和<script>的区别

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买