vue3 v-model自定义修饰符写法

简介: vue3 v-model自定义修饰符写法
在vue3 v-model是破坏性的更新的
c-model在组件也很重要
v-model是一个语法糖 由emit+props组合而成
1.默认值改变
props:value==》(vue3)modelValue
事件:input==>(vue3)update:modelValue(不可改名哦);
新增多个v-model和自定义修饰符

上案例:
App.vue

<template>
  <button @click="flag=!flag;title='我是烟火'" 
       style="position:absolute;top:10%">切换  {{flag}}</button>  
     <Dialog v-model="flag"   v-model:title="title" @clicks='click'></Dialog>
 
</template> 
<script   setup lang="ts">
import  {ref} from 'vue'
import  Dialog from './components/Dialog.vue' 
const flag=ref<Boolean>(true);
const title=ref<string>('我是烟火')
    //vue2的自定义事件  子组件传输emit
  const clicks=(fla:string)=>{
    title.value=fla;
  }
</script>

<style scoped>
 
</style>

Dialog.vue

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

<script setup lang="ts">
import { defineProps, defineEmits } from "vue"

type Props={
    modelValue:boolean  ,//接收的是默认值v-model="flag"  
    title:string,         //接收的是自定义的v-model:title="title"
}
const PropsData= defineProps<Props>()
const  emit=defineEmits(['update:modelValue','update:title','clicks'])
const close=()=>{ 
    // 传过来的是modelValue值是false所以update:modelValue直接更改父元素的flag存储的布尔值
     emit('update:modelValue',false);
    // 传过来的是title值是‘我是烟火’所以update:title直接更改父元素的title存储的string值
     emit('update:title','我是炮仗');
     //你也可以使用vue2的写法(自己想咋写都行不推荐):父组件去接收自定义事件
       emit('clicks','我是炮仗');
}
</script>

<style scoped lang="less">
.dialog{
    width: 300px;height:300px;
    border:1px solid red;
    position: absolute;
    left:50%;right: 50%;
    transform: translate(-50%,-50%);
    &-header{
        border-bottom: 1px solid red;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    &-content{
                padding: 10px;

    }
}
</style>

2.带自定义修饰符的写法
在这里插入图片描述

<template>
<div class="" style="position:absolute;top:10%">
  <button @click="flag=!flag;title='我是烟火'"  >{{flag}}{{title}}</button>
       
 </div>
     <!-- 绑定在v-model上或者是v-model的修饰符(v-model.xx='' 子组件接收的都是boolean值)
      v-model:title.aa="title"   :title是传输的正常值 .aa是布尔值
      -->
     <Dialog v-model="flag" v-model:title.aa="title" v-model.xiaozhu="flag"></Dialog>
</template> 
<script   setup lang="ts">
import  {ref,Directive, DirectiveBinding} from 'vue' 
import  Dialog from './components/Dialog.vue' 
const flag=ref<Boolean>(true);
const title=ref<string>('我是烟火') 
const aa=ref('') 
</script>

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

<script setup lang="ts">
import { defineProps, defineEmits } from "vue"

type Props={
    modelValue:boolean  ,//接收的是默认值v-model="flag"
    title:string,
//  xiaozhu其值为 true——因为 xiaozhu 被设置在了写为 v-model.xiaozhu="flag" 的 v-model 绑定上 
    modelModifiers?:{//v-model加的修饰符v-model.xiaozhu="flag" 默认的是modelModifiers
      xiaozhu:boolean 
    },
//aa其值为 true——因为 aa 被设置在了写为 v-model:title.aa="title" 的 v-model 绑定上
//v-model加的修饰符 v-model:title.aa="title"不在是默认的modelModifiers而是titleModifiers
    titleModifiers?:{        
      aa:boolean
    }
}
const PropsData= defineProps<Props>()
const  emit=defineEmits(['update:modelValue','update:title'])
const close=()=>{
    if(PropsData.titleModifiers?.aa){
      emit('update:title','我是你aa')
    }else{
      emit('update:title','我是bb')
        
    }
    // 传过来的是modelValue值是false所以update:modelValue直接更改父元素的flag存储的布尔值
    emit('update:modelValue',false);
}
</script>

<style scoped lang="less">
.dialog{
    width: 300px;height:300px;
    border:1px solid red;
    position: absolute;
    left:50%;right: 50%;
    transform: translate(-50%,-50%);
    &-header{
        border-bottom: 1px solid red;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    &-content{
                padding: 10px;

    }
}
</style>
相关文章
|
3天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
16 7
|
4天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
17 3
|
3天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
19 1
|
3天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
20 1
|
6天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
JavaScript 前端开发 UED
如何在 Vue 自定义组件中正确使用 v-model 进行数据的双向绑定?
如何在 Vue 自定义组件中正确使用 v-model 进行数据的双向绑定?
225 0
|
JavaScript 前端开发 算法
web前端面试高频考点——Vue组件间的通信及高级特性(多种组件间的通信、自定义v-model、nextTick、插槽)
web前端面试高频考点——Vue组件间的通信及高级特性(多种组件间的通信、自定义v-model、nextTick、插槽)
139 0
|
JavaScript
Vue:自定义v-model数据双向绑定
Vue:自定义v-model数据双向绑定
132 0
Vue:自定义v-model数据双向绑定
|
容器 JavaScript
Vue自定义v-model
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82811783 ...
1114 0
|
7天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。