心莫急，马上来咯🫵

Vue3 开发笔记

Sep 11, 2024

#Vue3

Vue3 开发笔记

1. Vue 3 编译宏详解

宏是在编译时执行的代码，而不是运行时执行的代码。

vue中的宏到底是什么？

vue3的宏是一种特殊的代码，在编译时会将这些特殊的代码转换为浏览器能够直接运行的指定代码，根据宏的功能不同，转换后的代码也不同。
为什么这些宏不需要手动从vue中import？

因为在编译时已经将这些宏替换为指定的浏览器能够直接运行的代码，在运行时已经不存在这些宏相关的代码，自然不需要从vue中import。
为什么只能在setup顶层中使用这些宏？

因为在编译时只会a去处理setup顶层的宏，其他地方的宏会原封不动的输出回来。在运行时由于我们没有在任何地方定义这些宏，当代码执行到宏的时候当然就会报错。

1.1 defineProps：接收组件 Props

父子组件传参

vue
<template>
 <div>
    <Child name="xiaoman"></Child>
 </div>
</template>
 <script lang='ts' setup>
 import Child from './views/child.vue'
</script>
<style></style>

子组件使用defineProps接受值

vue
<template>
 <div>
     {{ name }}
 </div>
</template>
 <script  lang='ts' setup>
 defineProps({
     name: String
 })
</script>

使用TS字面量模式

vue
<template>
 <div>
     {{ name }}
 </div>
</template>
 <script  lang='ts' setup>
 defineProps<{
    name:string
 }>()
</script>

Vue3.3 新增 defineProps 可以接受泛型

vue
 <Child :name="['xiaoman']"></Child>
 //-------------子组件-----------------
 <template>
 <div>
     {{ name }}
 </div>
</template>
 <script generic="T"  lang='ts' setup>
 defineProps<{
    name:T[]
 }>()
</script>

反应式 Props 解构

vue
const { msg = 'hello' } = defineProps(['msg'])

1.2 defineEmits：定义事件

vue
<template>
 <div>
    <button @click="send">派发事件</button>
 </div>
</template>
 <script  lang='ts' setup>
const emit = defineEmits<{
    'send':[name:string]
}>()
const send = () => {
    // 通过派发事件，将数据传递给父组件
    emit('send', '我是子组件的数据')
}
</script>

1.3 defineExpose：暴露组件属性

vue
defineExpose({
    name:"张三"
})

1.4 defineSlots：声明插槽

父组件传递插槽内容：

vue
<template>
    <div>
        <Child :data="list">
            <template #default="{item}">
                   <div>{{ item.name }}</div>
            </template>
        </Child>
    </div>
</template>
<script lang='ts' setup>
import Child from './views/child.vue'
const list = [
    {
        name: "张三"
    },
    {
        name: "李四"
    },
    {
        name: "王五"
    }
]
</script>
<style></style>

**子组件声明插槽类型：**只做声明不做实现同时约束slot类型

vue
<template>
 <div>
     <ul>
        <li v-for="(item,index) in data">
            <slot :index="index" :item="item"></slot>
        </li>
     </ul>
 </div>
</template>
 <script generic="T"  lang='ts' setup>
defineProps<{
    data: T[]
}>()
defineSlots<{
   default(props:{item:T,index:number}):void
}>()
</script>

1.5 defineOptions：定义组件选项

主要是用来定义 Options API 的选项

常用的就是定义name 在seutp 语法糖模式发现name不好定义了需要在开启一个script自定义name现在有了defineOptions就可以随意定义name了

vue
defineOptions({
    name:"Child",
    inheritAttrs:false,
})

1.6 defineModel：声明 v-model

vue
//父组件 
<OperateDialog
      v-model:show="addDialog"
      :title="dialogTitle"
      :currentFormData="currentFormData"
      @updateList="getUserList"
    ></OperateDialog>
 
 
// 子组件
const dialogShow = defineModel('show', { required: true })

https://blog.vuejs.org/posts/vue-3-3

2. SCSS 使用记录

2.1 使用 `@apply` 和 `!important`

scss
@apply text-primary #{!important};

2.2 深度作用选择器（样式穿透）

scss
:deep(.qu-menu-item-selected) {
  color: red;
}

.......

心莫急，马上来咯🫵

Vue3 开发笔记

1. Vue 3 编译宏详解

宏是在编译时执行的代码，而不是运行时执行的代码。

vue中的宏到底是什么？

vue3的宏是一种特殊的代码，在编译时会将这些特殊的代码转换为浏览器能够直接运行的指定代码，根据宏的功能不同，转换后的代码也不同。
为什么这些宏不需要手动从vue中import？

因为在编译时已经将这些宏替换为指定的浏览器能够直接运行的代码，在运行时已经不存在这些宏相关的代码，自然不需要从vue中import。
为什么只能在setup顶层中使用这些宏？

因为在编译时只会a去处理setup顶层的宏，其他地方的宏会原封不动的输出回来。在运行时由于我们没有在任何地方定义这些宏，当代码执行到宏的时候当然就会报错。

1.1 defineProps：接收组件 Props

父子组件传参

vue
<template>
 <div>
    <Child name="xiaoman"></Child>
 </div>
</template>
 <script lang='ts' setup>
 import Child from './views/child.vue'
</script>
<style></style>

子组件使用defineProps接受值

vue
<template>
 <div>
     {{ name }}
 </div>
</template>
 <script  lang='ts' setup>
 defineProps({
     name: String
 })
</script>

使用TS字面量模式

vue
<template>
 <div>
     {{ name }}
 </div>
</template>
 <script  lang='ts' setup>
 defineProps<{
    name:string
 }>()
</script>

Vue3.3 新增 defineProps 可以接受泛型

vue
 <Child :name="['xiaoman']"></Child>
 //-------------子组件-----------------
 <template>
 <div>
     {{ name }}
 </div>
</template>
 <script generic="T"  lang='ts' setup>
 defineProps<{
    name:T[]
 }>()
</script>

反应式 Props 解构

vue
const { msg = 'hello' } = defineProps(['msg'])

1.2 defineEmits：定义事件

vue
<template>
 <div>
    <button @click="send">派发事件</button>
 </div>
</template>
 <script  lang='ts' setup>
const emit = defineEmits<{
    'send':[name:string]
}>()
const send = () => {
    // 通过派发事件，将数据传递给父组件
    emit('send', '我是子组件的数据')
}
</script>

1.3 defineExpose：暴露组件属性

vue
defineExpose({
    name:"张三"
})

1.4 defineSlots：声明插槽

父组件传递插槽内容：

vue
<template>
    <div>
        <Child :data="list">
            <template #default="{item}">
                   <div>{{ item.name }}</div>
            </template>
        </Child>
    </div>
</template>
<script lang='ts' setup>
import Child from './views/child.vue'
const list = [
    {
        name: "张三"
    },
    {
        name: "李四"
    },
    {
        name: "王五"
    }
]
</script>
<style></style>

**子组件声明插槽类型：**只做声明不做实现同时约束slot类型

vue
<template>
 <div>
     <ul>
        <li v-for="(item,index) in data">
            <slot :index="index" :item="item"></slot>
        </li>
     </ul>
 </div>
</template>
 <script generic="T"  lang='ts' setup>
defineProps<{
    data: T[]
}>()
defineSlots<{
   default(props:{item:T,index:number}):void
}>()
</script>

1.5 defineOptions：定义组件选项

主要是用来定义 Options API 的选项

常用的就是定义name 在seutp 语法糖模式发现name不好定义了需要在开启一个script自定义name现在有了defineOptions就可以随意定义name了

vue
defineOptions({
    name:"Child",
    inheritAttrs:false,
})

1.6 defineModel：声明 v-model

vue
//父组件 
<OperateDialog
      v-model:show="addDialog"
      :title="dialogTitle"
      :currentFormData="currentFormData"
      @updateList="getUserList"
    ></OperateDialog>
 
 
// 子组件
const dialogShow = defineModel('show', { required: true })

https://blog.vuejs.org/posts/vue-3-3

2. SCSS 使用记录

2.1 使用 `@apply` 和 `!important`

scss
@apply text-primary #{!important};

2.2 深度作用选择器（样式穿透）

scss
:deep(.qu-menu-item-selected) {
  color: red;
}

.......

Vue3 开发笔记

目录