XiaoHang

Vue3编译宏

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

  • vue中的宏到底是什么？

    vue3的宏是一种特殊的代码，在编译时会将这些特殊的代码转换为浏览器能够直接运行的指定代码，根据宏的功能不同，转换后的代码也不同。

  • 为什么这些宏不需要手动从vue中import？

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

  • 为什么只能在setup顶层中使用这些宏？

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

defineProps

  • 父子组件传参
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'])

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>

defineExpose

没变化

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

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>

子组件 defineSlots只做声明不做实现 同时约束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>

defineOptions

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

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

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

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