前言:Vue3中我们需要通过setup()函数进行return,setup语法糖解决了这个冗余的问题。
使用方法
通过在script标签上添加setup使用语法糖
<script setup lang="ts"></script>
这就就不需要再使用setup函数进行return操作了,是不是很简单。
Props通过defineProps进行接受,这个函数是内置的,引入直接使用
// 养成好习惯,给每一个Props创建interface
interface Props {
name: string
}
const props = defineProps<Props>()
通过withDefaults给Props设置默认值,还是使用上面的那个例子
const props = withDefaults(defineProps<Props>(), {
name: 'HoMeTown'
})
在setup语法糖中,不需要自己注册自定义componet,引入的组件可以直接使用,例:
<template>
<show-name :name="HOMETOWN" />
</template>
<script setup lang="ts">
import ShowName from './show-name/index.vue'
</script>
通过defineEmits可以获取当前组件拥有的事件
const emits = defineEmits(['onChangeName'])
onChangeName('xxx')
我们可以通过:xxx解释一个事件,这样就可以防止我们在自定义v-model时,占用默认的value
<upload-file v-model:pdf="pdfUrl" />
<upload-file v-model:docs="docsUrl" />
const emits = defineEmits(['update:pdf', 'update:docs'])
// 修改pdf文件
emits('update:pdf', pdfFile)
// 修改docs文件
emits('update:docs', docsFile)
通过defineExpose将子组件的方法或属性暴露给父组件
Son.vue
...
function getSomething() {
...
}
defineExpose({
getSomeThing // 对父组件抛出方法
})
...
Parent.vue
<son ref="son" />
const sonDom = ref() // 获取子组件ref
sonDom.value.getSomething() // 成功调用Son组件的getSomething方法
<script setup lang="ts">
import { computed } from 'vue'
const doubleNum = computed(() => num *= 2) // 注意,这里的doubleNum是一个proxy,需要通过doubleNum.value获取原值
</script>
普通监听
<script setup lang="ts">
import { watch } from 'vue'
watch(doubleNum, val => {
console.log(val, 'watcher')
})
**深层监听**
<script setup lang="ts">
import { watch } from 'vue'
watch(() => modelFrom.doubleNum, val => {
console.log(val, 'deep watcher')
}, { deep: true })
</script>
Slots && Attrs
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()