script setup - 简介
先来看一看官网关于 <script setup> 的介绍:
要彻底的了解 setup 语法糖，你必须先明确 setup() 这个 组合式API
官网中对于这一api的介绍是—— 在 setup() 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup() 暴露的属性
1.没有在 <script> 标签后添加 setup 时，你在声明/初始化 响应式 变量或者函数时，每一个都需要在 setup() 的return中进行返回，像这样：
<script> import { ref } from 'vue' export default { setup() { const count = ref(0) // 返回值会暴露给模板和其他的选项式 API 钩子 return { count } } } </script> 当你选择<script setup>语法糖时，即可免去这一恶心的操作
like this：
<template> <!-- 组件自动注册 --> <Child /> <!-- 变量自动注册 --> {{count}} </template> <script setup> // 注册的组件、变量、函数、方法示例直接暴露给模板 import Child from './Child.vue' // 直接定义 count 无需返回 const count = ref(0) </script> 2.组件核心 API 直接可以使用
类似 props 、 emits 、 slots 和 attrs 等
props : 通过defineProps指定当前 props 类型，获得上下文的props对象，一般用来定义组件的属性
<script setup> import { defineProps } from 'vue' const props = defineProps({ title: String, }) </script> 父子组件传值的时候用到的 emits
使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit
<script setup> import { defineEmits } from 'vue' const emit = defineEmits(['change', 'delete']) </script> 小结
在以往的写法中，包括在vue2.0，定义数据和方法，都需要在结尾 return 出去，在能在dom模板中使用。而vue3.0新增的<script setup> 写法中，定义的属性和方法直接暴露给模板和示例组件而省去返回的环节，可以直接使用。
-- 希望本文可以帮助到你 2023年1月12日 --
