前言：

        vue3中提供了单文件组件 script setup ，这里来分享总结下他的用法。

官方入口：点我

一、基本语法：默认js方法里面都是setup方法内部方法

1、普通版

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

2、ts版本

<script lang="ts" setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

3、案例使用：

子组件：

<el-button @click="resetForm()">取消</el-button>

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

    //定义事件
    const emit = defineEmits(["resetForm"]) 

    // 点击取消的具体函数
    const resetForm = () => {
      

      emit("resetForm") // 发送事件
    }
</script>

父组件：

<abc @resetForm="父组件对应的函数名()" />

二、defineProps 和 defineEmits

接受父级的值和发送给父级内容

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

三、defineExpose

使用 <script setup> 的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏：

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

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>