Vue3 第二十六章（深入v-model）

[TOC]

小彩蛋Vue3自动引入插件
unplugin-auto-import/vite

vite配置

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"
  })]
})

配置完成之后使用ref reactive watch 等无须import 导入可以直接使用
GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup
v-model
TIps 在Vue3 v-model 是破坏性更新的
v-model在组件里面也是很重要的
v-model 其实是一个语法糖通过props 和 emit组合而成的
1.默认值的改变

prop：value -> modelValue；
事件：input -> update:modelValue；
v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增支持多个v-model
新增支持自定义修饰符

案例子组件
```vue

<a name="qr2ko"></a>
### 父组件
```vue
<template>
  <button @click="show = !show">开关{{show}}</button>
  <Dialog v-model="show"></Dialog>
</template>

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

<style>
</style>

绑定多个案例

子组件

<template>
     <div v-if='modelValue ' class="dialog">
         <div class="dialog-header">
             <div>标题---{{title}}</div><div @click="close">x</div>
         </div>
         <div class="dialog-content">
            内容
         </div>

     </div>
</template>

<script setup lang='ts'>

type Props = {
   modelValue:boolean,
   title:string
}

const propData = defineProps<Props>()

const emit = defineEmits(['update:modelValue','update:title'])

const close = () => {
     emit('update:modelValue',false)
     emit('update:title','我要改变')
}

</script>

<style lang='less'>
.dialog{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    &-header{
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    &-content{
        padding: 10px;
    }
}
</style>

父组件

<template>
  <button @click="show = !show">开关{{show}} ----- {{title}}</button>
  <Dialog v-model:title='title' v-model="show"></Dialog>
</template>

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

<style>
</style>

自定义修饰符
添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop

<script setup lang='ts'>

type Props = {
    modelValue: boolean,
    title?: string,
    modelModifiers?: {
        default: () => {}
    }
    titleModifiers?: {
        default: () => {}
    }

}

const propData = defineProps<Props>()

const emit = defineEmits(['update:modelValue', 'update:title'])

const close = () => {
    console.log(propData.modelModifiers);

    emit('update:modelValue', false)
    emit('update:title', '我要改变')
}

————————————————
版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/123187523

vite配置

案例 子组件

绑定多个案例

案例子组件