【vue3】咱就是说,用setup语法糖它不香吗
setup语法糖写起来舒服多了,赶紧学起来吧~
前言
阅读本文,我默认你已经学习了vue3的基本语法,对composition API有一定了解。常规的写法,需要将模板中要引用的变量和方法在setup钩子中return出来,如果代码体量够大,写return就得费半天劲,而且还得往下翻找return的地方,麻烦死了。这也是很多vue2的小伙伴感觉vue3使用反而更麻烦了的一个很重要的吐槽点。
但是,在vue3.2版本之后,官方推出了setup语法糖,解决了这个问题。妈妈再也不用担心我敲代码敲断手指了~
下面我就给大家总结下setup语法糖的具体用法:
目录
defineProps :代替props,接收父组件传递的数据(父组件向子组件传参)
defineEmit 代替emit,子组件向父组件传递数据(子组件向外暴露数据)
defineExpose :子组件暴露自身数据,(父组件获取子组件属性)
1、基本使用
当使用
<script setup>
的时候,里面的代码会被编译成组件setup()
函数的内容。这意味着与普通的<script>
只在组件被首次引入的时候执行一次不同,<script setup>
中的代码会在每次组件实例被创建的时候执行。
当使用 <script setup>
的时候,任何在 <script setup>
声明的顶层的绑定 (包括变量,函数声明,以及 import 引入的内容) 都能在模板中直接使用:
<script setup>
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
<template>
<div @click="log">{{ msg }}</div>
</template>
2、响应式
ref响应式数据和从 setup()
函数中返回值一样,值在模板中使用的时候会自动解包,不需要用xxx.value取值。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
3、自动注册
import 导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数,并不需要通过
methods
选项来暴露它:
这样的话,我们引入组件之后,就不需要在components选项中注册它了,直接就能在模板中使用了。被引入时的变量名直接作为自定义组件的标签名使用。当然了,引入方法,变量也是一样的,直接就能在template里用了。
<template>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
//这里我们引入了子组件 subassembly
import subassembly from './subassembly.vue'
</script>
4、组件通信
注意:defineProps,
defineEmits,defineExpose这三个api都是可以直接在
<script setup>里使用的,不需要引入。
-
defineProps :代替props,接收父组件传递的数据(父组件向子组件传参)
代码示例:
父组件代码:
<template>
<div>我是父组件----1</div>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import subassembly from './subassembly.vue'
//把值传递给子组件 ---> :title="msg" <Home @getChili="getChili" :title="msg" />
const msg = ref('父的值')
</script>
复制代码
子组件代码:
<template>
<div>我是子组件----2</div>
<div style="color: red">{{props.title}}</div>
</template>
<script setup>
import {defineProps} from 'vue'
//接收父组件 传过来的值!
const props = defineProps({
title: {
type: String
}
});
//打印一下 接收父组件的值
console.log(props.title) //父的值
</script>
-
defineEmit 代替emit,子组件向父组件传递数据(子组件向外暴露数据)
代码示例:
子组件代码:
<template>
<hr>
<div>我是子组件----2</div>
<button @click="toEmits">点击传到父组件</button>
</template>
<script setup>
import {defineEmits,ref} from 'vue'
//先定义一下子 在发送值
const emits = defineEmits(['getChili']);
const toEmits = () => {
emits('getChili','子的值')
}
</script>
复制代码
父组件代码:
<template>
<div>我是父组件----1</div>
<div>{{data}}</div>
<subassembly @getChili="getChili" :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import subassembly from './subassembly.vue'
//空值接收 子组件的传值
let data = ref(null)
const getChili = (e) => {
data.value = e
console.log(e) //子组件的值
}
</script>
-
defineExpose :子组件暴露自身数据,(父组件获取子组件属性)
在标准组件写法里,子组件的数据都是默认隐式暴露给父组件的,但在script-setup
模式下,所有数据只是默认return给template 使用,不会暴露到组件外,所以父组件是无法直接通过挂载ref 变量获取子组件的数据。如果要调用子组件的数据,需要先在子组件显示的暴露出来,才能够正确的拿到,这个操作,就是由defineExpose来完成。
代码示例:
子组件代码:
<template>
<div>我是子组件----2> {{ xiaoZhi.stator }}</div>
</template>
<script setup>
import {ref, defineExpose, reactive} from 'vue'
let xiaoZhi = reactive({
stator: '小志',
age: 27
})
let xiaoXiaoZhi = ref('小小志');
console.log(xiaoXiaoZhi)
defineExpose({
xiaoZhi,
xiaoXiaoZhi
})
</script>
复制代码
父组件代码:
<template>
<button @click="shiEmots">获取暴露</button>
<subassembly ref="shield"/>
</template>
<script setup>
import subassembly from './subassembly.vue'
import {defineEmits,defineProps,ref} from 'vue'
const shield = ref()
const shiEmots = () =>{
//子组件接收暴露出来得值
console.log('接收reactive暴漏出来的值',shield.value.xiaoZhi)
console.log('接收ref暴漏出来的值',shield.value.xiaoXiaoZhi)
}
</script>
5、使用name属性
直接在<script setup>标签上写上name属性就好了
<script setup lang="ts" name="xxx"></script>
6、使用useSlots和useAttrs
在 <script setup>
使用 slots
和 attrs
的情况应该是很罕见的,因为可以在模板中通过 $slots
和 $attrs
来访问它们。在你的确需要使用它们的罕见场景中,可以分别用 useSlots
和 useAttrs
两个辅助函数:
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
useSlots
和 useAttrs
是真实的运行时函数,它会返回与 setupContext.slots
和 setupContext.attrs
等价的值,同样也能在普通的组合式 API 中使用。
最后
其他的watch,watchEffect,生命周期啥的和普通的script用法一样,引入使用就行了。
好了,看完本文setup语法糖学会了没,赶紧去用起来吧~觉得本文对你有帮助,可以三连支持下哦~
更多推荐
所有评论(0)