【Vue3】第十一部分 setup语法糖

【Vue3】第十一部分 setup语法糖

---

---

11. setup语法糖

1. 引入组件的时候不需要注册组件
2. 定义变量的时候不需要return出去,顶层的绑定会暴露给模板,模板中可以直接使用
3. 使用 defineProps 、defineEmits 、defineExpose 等API，它们将自动地在 <script setup> 中可用

<script lang="ts" setup>
  import {ref} from "vue"
  // 只需要引入需要的组件,不需要注册组件
  import Test from "./components/Test.vue"
  // 定义变量不需要return出去
  const count = ref(0)
  const Add = () =>{
    count.value++
  }
</script>

<template>
  <div>
    <Test></Test>
    <h1>{{count}}</h1>
    <button @click="Add">Add</button>
  </div>
</template>

<style scoped lang='less'>
</style>

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！