vue3学习(十一)--- v-model

文章目录

v-model 其实是一个语法糖 通过propsemit组合而成的

v-model的更新

vue2和vue3中的v-model是有一些差别的:

  1. prop:value 变为 modelValue
  2. 事件:input 变为 update:modelValue
  3. v-bind 的 .sync 修饰符和组件的 model 选项已移除
  4. 新增 支持多个v-model
  5. 新增 支持自定义修饰符 Modifiers
javascript 复制代码
父组件
<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>
javascript 复制代码
子组件
<template>
     <div v-if='propData.modelValue ' class="dialog">
         <div class="dialog-header">
             <div>标题</div><div @click="close">x</div>
         </div>
         <div class="dialog-content">
            内容
         </div>
         
     </div>
</template>
 
<script setup lang='ts'>
 
type Props = {
	默认就叫modelValue
   modelValue:boolean
}
 
const propData = defineProps<Props>()

emit的默认事件名称写法
const emit = defineEmits(['update:modelValue'])
 
const close = () => {
     emit('update:modelValue',false)
}
 
</script>

多个 v-model 绑定

javascript 复制代码
父组件
<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>
javascript 复制代码
子组件
<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>

自定义修饰符

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

javascript 复制代码
父组件
<template>
  <button @click="show = !show">开关{{show}} ----- {{title}}</button>
  这里添加修饰符
  <Dialog v-model:title.flag='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>
javascript 复制代码
<script setup lang='ts'>
 
type Props = {
    modelValue: boolean,
    title?: string,
    默认写法
    modelModifiers?: {
        default: () => {}
    }
    用的是修饰符前面的参数 + 'Modifiers'的固定写法
    titleModifiers?: {
        default: () => {}
    }
 
}
 
const propData = defineProps<Props>()

 console.log(propData.modelModifiers) ===> //{}
 console.log(propData.titleModifiers) ===> //flag:true

const emit = defineEmits(['update:modelValue', 'update:title'])
 
const close = () => {
    console.log(propData.modelModifiers);
 
    emit('update:modelValue', false)
    emit('update:title', '我要改变')
}
相关推荐
然我15 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子20 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹23 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器30 分钟前
指定阿里镜像原理
前端
枷锁—sha34 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha36 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss