Vue3學(xué)習(xí)筆記——自動導(dǎo)入Vue3APIs、v-model-創(chuàng)新互聯(lián)

目錄

為梁園等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及梁園網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都做網(wǎng)站、梁園網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

1. 自動導(dǎo)入 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. 自動導(dǎo)入 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 無需導(dǎo)入，可直接使用

使用示例：

// 使用前
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 表示有名字），則使用默認(rèn)寫法 ——?modelValue

在子組件中定義 v-model 需要的 emits：

如果沒有定義名字（比如 v-model:title 表示有名字），則使用默認(rèn)寫法 —— update:modelValue

2.3?綁定多個 v-model 2.3.1 父組件

在父組件中引入子組件，并給子組件添加?v-model 的綁定值 show

注意：此處的 v-model 有多個：

• 后面可以跟具體的名字，比如 v-model:title；
• 后面也可以不跟名字，使用默認(rèn)值（只能有一個默認(rèn)的 v-model）

2.3.2 子組件

在子組件中定義 v-model 需要的 props：

• 如果沒有定義名字，則使用默認(rèn)寫法 ——?modelValue
• 如果有名字（比如 v-model:title），則這么寫 ——?title

在子組件中定義 v-model 需要的 emits：

• 如果沒有定義名字，則使用默認(rèn)寫法 —— 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 值時，使用 自定義修飾符，判斷應(yīng)該返回什么值