vue3中script里使用setup语法糖

最新推荐文章于 2024-08-22 15:26:46 发布

发呆的小蔡°

最新推荐文章于 2024-08-22 15:26:46 发布

阅读量2.2k

点赞数 2

分类专栏： Vue3.2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/shivy_/article/details/127969444

版权

Vue3.2 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

介绍

在 vue3 中，定义变量，使用方法等都需要通过setup() 函数手动暴露出去才可以使用；当定义的变量，或者使用的方法过多的时候，一个个去 return会很繁琐；通过在 script 里添加setup可以直接简化这些代码，不用重复的手动去暴露；具体使用方式是 <script setup></script>
优点：

简化了组合 API 必须 return 的写法，简化了代码量
拥有更好的运行时性能
import 引入的组件也会自动导出，模板里可以直接引用。

使用

 <!-- 使用方式，需要在 <script> 代码块上添加 setup -->
<script setup>
  // 直接引入组件即可，因为使用了setup，他会自动注册；
  import anotherPage from "./components/AnotherPage.vue" 
  // 使用 defineExpose,defineEmits,defineProps。都不用import
  import {
  ref,
  reactive,
  watch,
} from "vue";

  // 组件传值
  const props = defineProps({
    list: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: "标题"
    }
  })
  // 向组件传递方法
  const emits = defineEmits(["changeNum"])

   // 定义变量
  const number = ref('1001')
  const user = reactive({
    name: lisa,
    age: 10
  })
  // 定义方法
  const addNum = () => {
    number.value++;
    user.age = 11;
  }
  // 向组件传递方法
  const changeNum = (val) => {
    emits("changeNum",val)
  }

  // 将组件属性和方法暴露出去，供父组件使用
  defineExpose({
    number,  // 暴露属性
    user,  // 暴露属性
    addNum, // 暴露方法
  })
</script>