Vue3学习笔记——自动导入Vue3APIs、v-model-创新互联

目录

为梁园等地区用户提供了全套网页设计制作服务，及梁园网站建设行业解决方案。主营业务为网站设计、成都做网站、梁园网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

1. 自动导入 Vue3 APIs —— unplugin-auto-import/vite

2. v-model

2.1 相较于 Vue2，Vue3 做出了哪些变化？

2.2 绑定一个 v-model

2.2.1 父组件

2.2.2 子组件

2.3 绑定多个 v-model

2.3.1 父组件

2.3.2 子组件

2.4 v-model 中的自定义修饰符 modelModifiers

2.4.1 父组件

2.4.2 子组件 

2.5 v-model 源码分析 / emit 源码分析

2.5.1 v-model 源码分析

2.5.2 emit 源码分析

---

1. 自动导入 Vue3 APIs —— unplugin-auto-import/vite

GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and RollupAuto import APIs on-demand for Vite, Webpack and Rollup - GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rolluphttps://github.com/antfu/unplugin-auto-import

Vue3 中的 APIs 无需导入，可直接使用

使用示例：

// 使用前
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() =>count.value * 2)

// 使用后
const count = ref(0)
const doubled = computed(() =>count.value * 2)

安装命令：

npm i -D unplugin-auto-import

vite 配置： 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 注意：不能缺少 /vite
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [vue(), AutoImport({
    imports:['vue'],
    dts:"src/auto-import.d.ts"
  })]
})

2. v-model

v-model 是一个语法糖，通过 props + emit 组合而成

2.1 相较于 Vue2，Vue3 做出了哪些变化？

props：value ->modelValue；

emits：input ->update:modelValue；

v-bind 的 .sync 修饰符和组件的 model 选项已移除

新增 支持多个v-model

新增 支持自定义 修饰符 Modifiers

2.2 绑定一个 v-model 2.2.1 父组件

在父组件中引入子组件，并给子组件添加 v-model 的绑定值 show

注意：此处的 v-model 只有一个，所以后面不用跟具体的名字，比如 v-model:title

2.2.2 子组件

在子组件中定义 v-model 需要的 props：

如果没有定义名字（比如 v-model:title 表示有名字），则使用默认写法 —— modelValue

在子组件中定义 v-model 需要的 emits：

如果没有定义名字（比如 v-model:title 表示有名字），则使用默认写法 —— update:modelValue

2.3 绑定多个 v-model 2.3.1 父组件

在父组件中引入子组件，并给子组件添加 v-model 的绑定值 show

注意：此处的 v-model 有多个：

• 后面可以跟具体的名字，比如 v-model:title；
• 后面也可以不跟名字，使用默认值（只能有一个默认的 v-model）

2.3.2 子组件

在子组件中定义 v-model 需要的 props：

• 如果没有定义名字，则使用默认写法 —— modelValue
• 如果有名字（比如 v-model:title），则这么写 —— title

在子组件中定义 v-model 需要的 emits：

• 如果没有定义名字，则使用默认写法 —— emit('update:modelValue', false)
• 如果有名字（比如 v-model:title），则这么写 —— emit('update:title','双向绑定改变 title')

2.4 v-model 中的自定义修饰符 modelModifiers

添加到 v-model 后边的修饰符，将通过 props 中的 modelModifiers  提供给组件

举个栗子~

• 在父组件中，定义了 v-model:title.islang，islang 就是自定义修饰符
• 在子组件的 props 中，通过 titleModifiers 属性接收并判断 —— 用户是否使用了自定义修饰符 islang，该 props 返回布尔值 

2.4.1 父组件

在父组件中，给 v-model 添加修饰符 .islang —— v-model:title.islang

2.4.2 子组件 

在子组件中，使用 titleModifiers 接收 v-model 修饰符，并在更新 title 值时，使用 自定义修饰符，判断应该返回什么值