vue3.2 正式语法 script setup ＜script setup＞

vue3.2 将之前的实验功能变为正式功能，在单文件组件中引入了一种新的脚本类型< script setup >。

示例

<script setup>
  import { ref } from 'vue'

  // 像在平常的setup中code
  // 但是不需要返回任何变量
  const count = ref(0)//在此处定义的count可以直接在模板html中引用
  const inc = () => {//函数也可以直接引用,而不用返回
    count.value++
  }
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

在setup中引入的组件可以直接使用

<script setup>
  import Foo from './Foo.vue'
  import MyComponent from './MyComponent.vue'
</script>

<template>
  <Foo />
  <!-- kebab-case also works -->
  <my-component />
</template>

这里标明，必须使用驼峰命名

兼容props,emit

import { defineProps, defineEmit } from 'vue'

  const props = defineProps({
    foo: String,
  })
  const emit = defineEmit(['change', 'delete'])

使用Slots和Attrs

不建议在vue3 中继续使用这些属性，但如果必须使用的话，需要useSlots, useAttrs

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

github