script setup基本使用2023-03-20 11:03:52

在单文件组件(SFC)中引入一个新的

复制代码
属性和方法
属性和方法无需挂载到对象上后再次返回

复制代码
上述案例会被编译为
// 导入的模块会被抽离到模块级别
import { ref } from ‘vue’
import Foo from ‘./components/Foo.vue’

export default {
setup() {
const count = ref(0)
const increment = () => count.value++

// 这是一个返回h函数的render函数
// 因为被编译到了setup函数中,所以可以直接访问顶层定义的属性和方法
return () => ([
  h(Foo, null, ''),
  h('h2', {
    count,
    onClick: increment
  }, count)
])

}
}
复制代码
props 和 emits
子组件

复制代码
父组件

复制代码

defineProps 和 defineEmits 是编译器宏(compiler macros )
只能在

复制代码
顶层await
顶层的 await 可以直接在

复制代码
与普通 script 一起使用

»