快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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 值时,使用 自定义修饰符,判断应该返回什么值