Vue3 v-model

Vue3 v-model的使用

<template>
  <h1>父组件{{ flag }} {{text}}</h1>
  <t-button @click="flag = !flag">开关</t-button>

  <VModel v-model="flag" v-model:textVal.isBt="text" />
</template>


<script setup lang="ts">
import VModel from "./components/VModel/VModel.vue"
import { ref } from "vue"

const flag = ref<boolean>(true)
const text = ref<string>("我是默认值")
</script>

<template>
  <div class="dialog" v-show="modelValue">
    <div>{{ modelValue }}</div>
    <div><t-button @click="close">关闭</t-button></div>
    <h1>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或</h1>
    <input :value="textVal" @input="change"/>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: boolean
  textVal: string
  textValModifiers?: {
    isBt: boolean
  }
}>()

const emit = defineEmits(["update:modelValue", "update:textVal"])

const close = () => {
  emit("update:modelValue", false)
}

const change = (e: Event) => {
  const target = e.target as HTMLInputElement
  if(props?.textValModifiers?.isBt) {
    emit("update:textVal", target.value + "变态")
  } else {
    emit("update:textVal", target.value)
  }
}
</script>

TIps 在Vue3 v-model 是破坏性更新的

v-model在组件里面也是很重要的

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

1.默认值的改变

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

案例 子组件

<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:boolean
}
 
const propData = defineProps<Props>()
 
const emit = defineEmits(['update:modelValue'])
 
const close = () => {
     emit('update:modelValue',false)
}
 
</script>

父组件

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

父组件

<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', '我要改变')
}