vue3笔记十一(深入学习v-model)

1、自动引入插件

// 1、安装
npm i -D unplugin-auto-import

// 2、vite.config.js中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx(), AutoImport({
    imports: ['vue'],
    dts: 'src/auto-import.d.ts'
  })]
})

配置完成后，项目重启生成auto-import.d.ts 文件。ref，watch等无需导入，直接使用

2、vue2、3中v-model改变

v-model实则就是一个语法糖，通过props和emit组合而成

vue2与vue3间变化：

• prop 由 value -> modelValue
• 事件 由 input -> update:modelValue
• v-bind的.sync修饰符和组件的model选项已移除（个人本来就不怎么用到，哈哈）
• 新增支持多个v-model
• 新增支持自定义修饰符

// 父组件
<template>
  <button @click="flag=!flag">{{flag ? '关' : '开'}}</button>
  <span>{{title}}</span>
  // 4、支持多个v-model及自定义修饰符
  <Dialog v-model.aaa="flag" v-model:title.bbb="title"/>
</template>

<script setup lang="ts">
import Dialog from './dialog.vue'
// 1、ref、watch无需引入，直接使用
const flag = ref<boolean>(true)
const title = ref<string>('这是标题')

watch(flag, (newVal, oldVal) => {
  console.log(newVal, oldVal, 'watch监听---------------')
})
</script>

// 子组件-----------------------------------------------------------------------------------------------
<template>
  // modelValue 或 propData.modelValue
  <div v-if="modelValue" class="dialog">
    <h1>弹窗组件</h1>
    <div class="content">
      <p>{{title}}</p>
      <p>这里是内容</p>
    </div>
    <button @click="close">关闭</button>
  </div>
</template>

<script setup lang="ts">
// 2、v-model接收prop
type Props = {
  modelValue: boolean,
  title: string,
  modelModifiers?: {
    aaa: boolean
  },
  titleModifiers?: {
    bbb: boolean
  }
}

const propData = defineProps<Props>()

// 3、发射v-model事件
const emit = defineEmits(['update:modelValue', 'update:title'])
const close = () => {
  // 5、打印自定义修饰符
  console.log(propData.modelModifiers, propData.titleModifiers)
  if (propData.modelModifiers?.aaa) {
    console.log('有aaa修饰符-----------')
  } else {
    console.log('没有aaa修饰符----------')
  }
  emit('update:modelValue', false)
  emit('update:title', '标题改变')
}
</script>

<style scoped>
.dialog {
  width: 300px;
  height: 300px;
  background-color: #fff999;
}
</style>

原文链接：https://xiaoman.blog.csdn.net/article/details/123187523