vue3语法糖

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3语法糖相关的知识,希望对你有一定的参考价值。

参考技术A Vue3官方提供了 script setup  语法糖

只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得。如下:

因为没有了setup函数,那么props,emit,attrs怎么获取呢

setup script语法糖提供了新的API来供我们使用

defineProps  用来接收父组件传来的 props ;  defineEmits  用来声明触发的事件。

//父组件

<template>

  <my-son foo="" @change="childClick" />

</template>

<script lang="ts" setup>

import MySon from "./MySon.vue";

let childClick = (e: any):void =>

  console.log(e);  //

;

</script>

//子组件

<template>

  <span @click="sonClick">信息: props.foo </span>

</template>

<script lang="ts" setup>

import defineEmits, defineProps from "vue";

const emit = defineEmits(["change"]);    // 声明触发事件 change

const props = defineProps( foo: String );  // 获取props

console.log(props)

const sonClick = () =>

    emit('change' , props.foo)



</script>

总结

1、语法糖就是setup()简写

2、在语法糖中使用变量可以直接使用

3、组件不需要祖册

4、不能使用非vue3的模块,钩子函数

以上是关于vue3语法糖的主要内容,如果未能解决你的问题,请参考以下文章

Vue3.2 setup语法糖总结

Vue3.2 setup语法糖总结

一文掌握 Vue3.2 setup 语法糖

一文掌握 Vue3.2 setup 语法糖

关于 Vue3 setup 语法糖

Vue3之父子组件传值(setup语法糖格式)