目录
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 源码分析
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"
})]
})
v-model 是一个语法糖,通过 props + emit 组合而成
props:value -> modelValue;
emits:input -> update:modelValue;
v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增 支持多个v-model
新增 支持自定义 修饰符 Modifiers
在父组件中引入子组件,并给子组件添加 v-model 的绑定值 show
注意:此处的 v-model 只有一个,所以后面不用跟具体的名字,比如 v-model:title
在子组件中定义 v-model 需要的 props:
如果没有定义名字(比如 v-model:title 表示有名字),则使用默认写法 —— modelValue
在子组件中定义 v-model 需要的 emits:
如果没有定义名字(比如 v-model:title 表示有名字),则使用默认写法 —— update:modelValue
关闭按钮
内容
在父组件中引入子组件,并给子组件添加 v-model 的绑定值 show
注意:此处的 v-model 有多个:
在子组件中定义 v-model 需要的 props:
在子组件中定义 v-model 需要的 emits:
关闭按钮
内容
添加到 v-model 后边的修饰符,将通过 props 中的 modelModifiers 提供给组件
举个栗子~
在父组件中,给 v-model 添加修饰符 .islang —— v-model:title.islang
在子组件中,使用 titleModifiers 接收 v-model 修饰符,并在更新 title 值时,使用 自定义修饰符,判断应该返回什么值