Vue3的setup语法糖

Vue3的setup语法糖

在Vue3中setup函数可谓是组合函数展示的舞台,使用了vue3之后,我们的代码就会呈现下面的这样

<template>

</template>
<script>
    export default {
        name: "xxx",
        setup(){
            return {
                
            }
        }
    }
</script>

基本上所有的代码都在setup中,其他的比如computed计算属性,watch监视属性,生命周期钩子函数

这些都可以通过引入组合式API来实现。所以Vue3中就有这么一种十分优雅的写法

<template>

</template>
<script setup>
    
</script>

下面来说说setup语法糖有哪些用法和需要注意的地方

Methods和数据的使用

这就和setup函数中一样的,该怎么写还是怎么写

在这里插入图片描述

子组件的使用

引入组件只需要引入即可,不需要使用components去注册组件

父组件给子组件传值

Feacher.vue

<template>
<Child :msg="msg"/>
</template>
<script setup>
    import {ref} from 'vue';
    let msg = ref('父组件给子组件传值');
</script>

Child.vue

<template>
// 这里可以直接拿到msg,不需要用props.去取值
{{msg}}
</template>
<script setup>
    // 这里其实可以不引入defineProps,因为setup解糖的时候,会自动引入的,引入了当然也没问题
    import {defineProps} from 'vue';
    let props = defineProps({
        msg: String
    });
    // 下面如果还需要使用props中的数据,需要使用props对象去拿到
</script>

子组件给父组件传值

Feather.vue

<template>
<Child @getMsgFromChild="getMsgFromChild"/>
</template>
<script setup>
    const getMsgFromChild = (msg)=>{
        console.log('父组件接收到子组件传来的参数',msg);
    }
</script>

Child.vue

<template>
<input type="text" v-model="msg"/>
<button @click="sendMsg">点我给父组件传值</button>
</template>
<script setup>
    // 这里其实可以不引入defineEmits,因为setup解糖的时候,会自动引入的,引入了当然也没问题
    import {ref,defineEmits} from 'vue';
    let emits = defineEmits(['getMsgFromChild']);
    let msg = ref('');
    const sendMsg = ()=>{
        emits('getMsgFromChild',msg);
    }
</script>

祖孙组件传值

Feather.vue

<template>
<Child/>
</template>
<script setup>
    import {ref,provide} from 'vue';
    let msg = ref('msg');
    provide('pro',{
        msg,
        changeMsg: (newVal)=>{
            msg.value = newVal
        }
    })
</script>

Child.vue

<template>
<Grand/>
</template>
<script setup>

</script>

Grand.vue

<template>
</template>
<script setup>
    import {inject} from 'vue';
	let pro = inject('pro');
    pro.changeMsg('other');
</script>

computed、watch、钩子函数

这些都是和在setup函数中写的一样的

引入组合API即可import {computed、watch、 } from 'vue'

Vuex的使用

<template>
</template>
<script setup>
	import {useStore} from 'vuex';
	let store = useStore();
</script>

Vue-Router的使用

<template>
</template>
<script setup>
	import {useRouter,useRoute} from 'vue-router';
    let route = useRoute();
    let router = useRouter();
</script>

Await的使用

直接使用即可,不需要加async

<template>
</template>
<script setup>
    import _axios from "@/plugins/custom_axios";
    const data = await _axios.get('/categories');
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芝麻\n

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值