Vue3特性概览

---

介绍

一、组件命名

官方建议使用大驼峰命名法来注册组件，原因如下：

1. 驼峰命名是合法的js标识符，导入、注册组件会更简单，IEDE会自动完成
2. 在setup语法糖中不用注册组件，直接导入使用即可，Vue组件比原生HTML元素更醒目

举个栗子🌰

<template>
      <Menu />
</template>

<script setup lang='ts'>
import Menu from "@/components/layout/menu/index.vue";
</script>

二、属性定义

最好采用具体的定义方式：

<script setup lang='ts'>
const props = defineProps({
   
    name:{
   
        type:string,
        require:true
    }
})
console.log(props.name)
</script>

三、事件定义

自定义事件的名称会被自动做转换，通常使用驼峰做事件名，监听时需要转换为肉串方式a-b

<!-- MyComponet组件-->
<button @click="$emit('someEvent')">点击我触发事件</button>

<!-- 引入MyComponet组件-->
<MyComponet @some-event="callback">

script setup中定义

<script setup lang='ts'>
const emit = defimeEmits(['someEvent'])
emit('someEvent')
</script>

四、透传特性

在vue3中，那些没有在组件props和emits中声明的特性或事件监听器称为透传特性，以前叫非属性特性，比如class,style和id特性。当组件只有单根时，透传特性自动被添加到根元素上作为其特性
例如：

<button class="large">点击</button>

若不想自动继承属性，可以使用inheritAttrs:false禁止

访问透传特性：

<script setup lang='ts'>
import {
   useAttrs} from 'vue'

const attrs = useAttrs()
</script>

五、插槽

如果要传递模板内容给子组件，我们使用插槽。