Vue3 学习笔记 —— 自动导入 Vue3 APIs、v-model


// 使用前
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


 
<script setup lang='ts'>
  import Dialog from "./components/Dialog/index.vue";
  import { ref } from 'vue'
 
  const show = ref(false)
script>

2.2.2 子组件

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

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

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

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


 
<script setup lang='ts'>
  type Props = {
     modelValue:boolean
  }
 
  const propData = defineProps<Props>()
 
  const emit = defineEmits(['update:modelValue'])
 
  // 关闭事件
  const closeDialog = () => {
     // 双向绑定更新值
     emit('update:modelValue', false)
  }
script>

2.3 绑定多个 v-model

2.3.1 父组件

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

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

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


 
<script setup lang='ts'>
  import Dialog from "./components/Dialog/index.vue";
  import { ref } from 'vue'
 
  const show = ref(false)
  const dialogTitle = ref('弹框名字')
script>

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')


 
<script setup lang='ts'>
  type Props = {
     modelValue: boolean,
     title: string,
  }
 
  const propData = defineProps<Props>()
 
  const emit = defineEmits(['update:modelValue', 'update:title'])
 
  // 关闭事件
  const closeDialog = () => {
     // 双向绑定更新值
     emit('update:modelValue', false)
     emit('update:title','双向绑定改变 title')
  }
script>

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


 
<script setup lang='ts'>
  import Dialog from "./components/Dialog/index.vue";
  import { ref } from 'vue'
 
  const show = ref(false)
  const dialogTitle = ref('弹框名字')
script>

2.4.2 子组件

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