Vue3 学习笔记 —— 自动导入 Vue3 APIs、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 Rollup
https://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 值时，使用 自定义修饰符，判断应该返回什么值