script setup - 简介
<script setup> 的介绍:
setup( 这个 组合式API
在 setup( 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup( 暴露的属性
<script> 标签后添加 setup 时,你在声明/初始化 响应式 变量或者函数时,每一个都需要在 setup( 的return中进行返回,像这样:
<script>
import { ref } from 'vue'
export default {
setup( {
const count = ref(0
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
count
}
}
}
</script>
当你选择<script setup>
语法糖时,即可免去这一恶心的操作
<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
<script setup> import { defineEmits } from 'vue' const emit = defineEmits(['change', 'delete'] </script>
小结
在以往的写法中,包括在vue2.0,定义数据和方法,都需要在结尾 return 出去,在能在dom模板中使用。而vue3.0新增的<script setup>
写法中,定义的属性和方法直接暴露给模板和示例组件而省去返回的环节,可以直接使用。-- 希望本文可以帮助到你 2023年1月12日 --