简介        

使用场景：1 用于表单input、textarea以及select元素上创建双向数据绑定

                  2 用于组件间数据的通信

一个小栗子，第一个使用场景的代码

<template><div class="box"><div class="intro"><el-input v-model="inputString" placeholder="Please input"></el-input></div><div class="intro"><div>inputvalue最新的值为 = {{ inputString }}</div></div></div>
</template>
<script setup>
import { watch, ref } from 'vue';const inputString = ref("");
watch(inputString, (newValue, oldValue) => {console.log("inputvalue = ", newValue, "oldValue = ", oldValue);
});</script>
<style lang="less">
.box {display: flex;flex-direction: column;.intro {margin: 15px;padding: 10px;}
}
</style>

        v-model可以与一个ref值联用，当input输入框的输入内容改变时，这个ref值会实时的跟着改变

一个小栗子，第二个是用场景：

自定义一个组件A，在组件A中对el-input进行了封装，自定义组件A的代码如下：

<template><div class="box"><el-input type="text" v-model="inputStr" @input="inputValueChange"></el-input></div>
</template>
<script setup>
/* vue3.4之后这样使用
import { defineModel } from 'vue';
const inputvalue = defineModel('inputvalue');
*/
import { ref } from 'vue';
defineProps({inputvalue: {required: true,default: "A component value"}
})
const emits = defineEmits(['update:inputvalue']);const inputStr = ref("");const inputValueChange = () => {emits('update:inputvalue',  inputStr.value);
}
</script>
<style scoped lang="less">
</style>

 在父组件中使用子组件A，并与父组件中的数据进行绑定，父组件中的代码如下：

<template><div class="box"><div class="intro"><div>自定义组件与父组件间值的双向绑定:{{ aValue }}</div><A v-model:inputvalue="aValue"></A></div></div>
</template>
<script setup>
import { ref } from 'vue';
import A from './components/index.vue';/*也可以用于自定义父子组件间的值的双向绑定
*/
const aValue = ref("super base value");</script>
<style lang="less">
.box {display: flex;flex-direction: column;.intro {margin: 15px;padding: 10px;}
}
</style>

 一个小栗子 ，父组件与子组件之间三个值同时进行双向绑定

创建一个子组件B，代码如下：

<template><div class="intro"><div class="btn" @click="oneEvent">change oneVal</div><div class="btn" @click="twoEvent">change twoVal</div><div class="btn" @click="threeEvent">change threeVal</div></div>
</template>
<script setup>
import { ref } from 'vue';
const props= defineProps({oneVal: {required: true,default: ""},twoVal: {required: false,default: ""},threeVal: {required: false,default: ""}
});
const emits = defineEmits(['update:oneVal', 'update:twoVal', 'update:threeVal']);
let numOne = 0;
let numTwo = 0;
let numThree = 0;
/* 在点击事件中改变三个与父组件双向绑定的值
*/
const oneEvent = () => {numOne = numOne + 2;let val = numOne + '';console.log("val = ", val);emits('update:oneVal', val);
};const twoEvent = () => {numTwo = numTwo + 2;let val = numTwo + '';console.log("val = ", val);emits('update:twoVal', val);
};const threeEvent = () => {numThree = numThree + 2;let val = numThree + '';console.log("val = ", val);emits('update:threeVal', val);
};
</script>
<style lang="less" scoped>
.intro {display: flex;flex-direction: row;margin: 15px;padding: 10px;.btn {margin-right: 150px;margin-left: 75px;background-color: aquamarine;padding: 20px;}
}
</style>

父组件中使用这个自定义组件，并与自定义组件进行三个值的双向绑定：

<template><div class="box"><div class="intro"><B v-model:oneVal="oneVal" v-model:twoVal="twoVal" v-model:threeVal="threeVal"></B></div></div>
</template>
<script setup>
import { ref } from 'vue';
import B from './components/b.vue';const oneVal = ref("父组件初值：oneVal");
const twoVal = ref("父组件初值：twoVal");
const threeVal = ref("父组件初值：threeVal");
</script>
<style lang="less">
.box {display: flex;flex-direction: column;.intro {margin: 15px;padding: 10px;}
}
</style>