前言
今天接着聊一下项目中用到的技术栈 Vue3 Script Setup
Vue3 Script Setup
众所周知,Vue3中我们需要通过setup()函数进行return,setup
语法糖解决了这个冗余的问题,在我司的这个项目中也是用到了 setup语法糖 + Ts
,说实在的,咱就是说整个一个被香到了,感谢那些参与Vue3文档翻译工作的同学们,栓Q。
特性与用法
食用方法
通过在script
标签上添加setup
使用语法糖,举个🌰
<script setup lang="ts"></script> 复制代码
这就就不需要再使用setup
函数进行return操作了,是不是很简单。
Props
defineProps
Props通过defineProps
进行接受,这个函数是内置的,引入直接使用,举个🌰
// 养成好习惯,给每一个Props创建interface interface Props { name: string } const props = defineProps<Props>() 复制代码
withDefaults
通过withDefaults
给Props设置默认值,还是使用上面的那个栗子🌰
const props = withDefaults(defineProps<Props>(), { name: 'HoMeTown' }) 复制代码
Auto component
在setup
语法糖中,不需要自己注册自定义componet,引入的组件可以直接使用,🌰
<template> <show-name :name="HOMETOWN" /> </template> <script setup lang="ts"> import ShowName from './show-name/index.vue' </script> 复制代码
Emits
defineEmits
通过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) 复制代码
Expose
通过defineExpose
将子组件的方法或属性暴露给父组件,举个🌰
Son.vue
... function getSomething() { ... } defineExpose({ getSomeThing // 对父组件抛出方法 }) ... 复制代码
Parent.vue
<son ref="son" /> 复制代码
const sonDom = ref() // 获取子组件ref sonDom.value.getSomething() // 成功调用Son组件的getSomething方法 复制代码
Computed
<script setup lang="ts"> import { computed } from 'vue' const doubleNum = computed(() => num *= 2) // 注意,这里的doubleNum是一个proxy,需要通过doubleNum.value获取原值 </script> 复制代码
Watch
普通监听
<script setup lang="ts"> import { watch } from 'vue' watch(doubleNum, val => { console.log(val, 'watcher') }) </script> 复制代码
深层监听
<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() 复制代码
完结~