Vue3 script setup 的使用

注意：需要 Vue 3.2 版本以上

• Vue3 引入了 composition API
• composition API 最重要的是 setup 函数
• <script> 只有一个 setup 函数太“孤单”，如何简化一下？

基本使用

• 顶级变量、自定义组件，可以直接用于模板
• 可以正常使用 ref reactive computed 等能力
• 和其他 <script> 同时使用

例子，定义一个 Child.vue

<template>
  <p>child</p>
</template>

<script>
export default {
  name: "Child"
}
</script>

然后在 Index.vue 中使用

<script>
function add(a, b) {
  return a + b
}
</script>

<script setup>
import {reactive, ref, toRefs} from "vue";
import Child from './Child'

const countRef = ref(100)

// 直接使用，不需要 return
function addCount() {
  countRef.value++
}

const state = reactive({
  name: 'lzw.'
})
// 直接使用，不需要 return
const {name} = toRefs(state)

// 直接使用其他 script 函数
const addVal = add(1, 2)
</script>

<template>
  <p @click="addCount">vue3.2+ script setup {{ countRef }} {{ name }} {{ addVal }}</p>
  <!--  直接引入使用，不需要注册了-->
  <Child></Child>
</template>

属性和事件

• defineProps
• defineEmits

还是定义一个子组件 Child.vue

<script setup>
import {defineProps, defineEmits} from "vue";

// 定义属性
const props = defineProps({
  name: String,
  age: Number
})

// 定义事件
const emits = defineEmits(['change', 'delete'])

function deleteHandler() {
  emits('delete', '删除')
}
</script>

<template>
  <p>child - {{ props.name }} {{ props.age }}</p>
  <button @click="$emit('change','修改')"> change</button>
  <button @click="deleteHandler"> delete</button>
</template>

然后在 Index.vue 中使用

<script setup>
import Child from './Child'

function onChange(info) {
  console.log('on change', info)
}

function onDelete(info) {
  console.log('on delete', info)
}
</script>

<template> 
  <!--  直接引入使用，不需要注册了-->
  <Child name="name" age="20" @change="onChange" @delete="onDelete"></Child>
</template>

暴露组件信息 defineExpose

还是定义一个子组件 Child.vue

<script setup>
import {ref, defineExpose} from "vue";
const a = ref(100)
const b = 200
defineExpose({
  a,
  b
})
</script>

然后在 Index.vue 中使用

<script setup>
import {onMounted} from "vue";
import Child from './Child'

const childRef = ref(null)
onMounted(() => {
  // 拿到 child 组件的一些数据
  console.log(childRef.value.a)
  console.log(childRef.value.b)
})
</script>

<template> 
  <!--  直接引入使用，不需要注册了-->
  <Child ref="childRef"></Child>
</template>