一、单向数据流

vue是单向数据流的，所以v-model其实是破坏性的

v-model是一个语法糖：

• 在vue2中v-model是input（根据表单类型决定）事件和value的结合；
• 在vue3中v-model是props和emit的结合

二、使用案例

v-model默认绑定的事件是'update:modelValue'，默认绑定的数据是modelValue

效果：

 

父组件：

<template>
  <div class="parent">
    <div>我是父组件</div>
    <el-button @click="changeName">我不同意你改</el-button>
    <div>我有{{money}}万元，败家儿子和我一块花</div>
    <Child v-model:money="money" v-model="name"></Child>
  </div>
</template>
<script setup lang="ts">
import Child from './child.vue';
const name = ref<string>('法外狂徒-张三');
const money = ref<number>(100);
const changeName = ()=>{
  name.value = '法外狂徒-张三';
}
</script>
<style scoped lang="less">
.parent {
  width: 500px;
  padding: 10px;
  background-color: aquamarine;

}
</style>

子组件：

<template lang="">
  <div class="child">
    <div>我是子组件</div>
    <div>父亲起的名字：{{modelValue}}</div>
    <el-button @click="changName">户籍室改名字</el-button>
    <el-button @click="consume">花老爹的钱寻开心</el-button>
  </div>
</template>
<script setup lang="ts">
type Props = {
  modelValue: string,
  money: number
};
const parentData = defineProps<Props>();
let childMoney = parentData.money;

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

const consume=()=>{
  emit('update:money', --childMoney)
}

const changName = () => {
  emit('update:modelValue', '尼古拉斯-赵四')
};
</script>
<style scoped lang="less">
.child {
  padding: 20px;
  background-color: bisque;
}
</style>

三、自定义修饰符

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。

改造父组件：

<Child v-model:money.myModifier="money" v-model="name"></Child>

改造子组件

<script setup lang="ts">
type Props = {
  modelValue: string,
  money: number,
  moneyModifiers?: {
    myModifier: boolean
  }
};
const parentData = defineProps<Props>();
let childMoney = parentData.money;
const emit = defineEmits(['update:modelValue', 'update:money']);
const consume = () => {
  console.log(parentData.moneyModifiers);
  // 可以通过判断此修饰符是否为true，来做一些相关的操作
  if(parentData?.moneyModifiers?.myModifier){
    emit('update:money', --childMoney)
  }else{
    emit('update:money', childMoney-=2)
  }
}
</script>