vue3 setup函数语法糖

会飞的鱼—

已于 2023-04-24 12:34:36 修改

阅读量133

点赞数

文章标签： vue.js javascript 前端

于 2023-04-24 10:53:50 首次发布

本文链接：https://blog.csdn.net/qq_47657875/article/details/130335608

版权

Vue3引入的<scriptsetup>语法简化了组件的编写，无需exportdefault和setup函数。它可以用于直接声明模板中的变量和方法，如直接定义constmsg和函数log。此外，它支持响应式数据（ref）和组件导入，无需显式注册。defineProps和defineEmits帮助处理props和事件，同时允许注入CSS变量以实现动态样式。

摘要由CSDN通过智能技术生成

1. 优点

省去export default 导出
省去setup函数及返回

<template>
  <button @click="log">{{ msg }}</button>
</template>

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

2. 其他用法

响应式数据


<template>
  <button @click="count++">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

使用组件省去组件注册

<template>
  <MyComponent />
</template>

<script setup>
import MyComponent from './MyComponent.vue'
</script>

`defineProps`、`defineEmits`和`useContext`  代替setup函数中的 props与context


<template>
  <span>{{ props.msg }}</span>
</template>

<script setup>
import { useContext, defineProps, defineEmits } from 'vue'。

const emit = defineEmits(['change', 'delete'])
const ctx = useContext()
const props = defineProps({  
  msg: String,
})

css 变量注入

<template>
  <span>123</span>  
</template>
 
<script setup>
  import { reactive } from 'vue'
 
  const state = reactive({
    color: 'green'
  })
</script>
  
<style scoped>
  span {
    color: v-bind('state.color');
  }