核心：v-model实现是通过默认自定义属性value,自定义方法input(Vue2)实现，自定义属性modelValue,自定义方法input(Vue3)实现。。
@input 一般用于监听事件
只要输入的值变化了就会触发input
其实：就是对父传子、子传父。
Vue2.0
关系：
<v-child v-model="numm"></v-child>
<!-- 等同于 -->
<v-child
:value="numm"
@input="(e) => (numm = e.target.value)"
></v-child>
流程：子组件props接受value属性，改变使用this.$emit触发input事件并传值，相当于触发父级 @input="(e) => (numm = e.target.value)"
子组件：
model和props需要配合使用获取自定义属性
<template >
<div class="container">
<p>我是children组件1</p>
<input type="text" v-bind:value="msg" @input="change">
</div>
</template>
<script>
export default {
model:{
prop:"msg",
event:'change'
},
props: ["msg"],
methods: {
change(e){
this.$emit('change',e.target.value)
},
},
};
</script>
<style scoped>
.container {
width: 300px;
height: 150px;
border: 2px solid yellow;
margin: 10px auto;
}
</style>
父组件
<template >
<div class="container">
{
{
msg}}
<button @click="eventsClick">eventsClick</button>
<v-children v-model="msg"></v-children>
<!-- //等同于 -->
<!-- <v-children v-bind:msg="msg" v-on:change="(e)=>{msg=e}"></v-children> -->
</div>
</template>
<script>
import vChildren from "../components/children/children";
export default {
components: {
vChildren },
data() {
return {
msg: "我是msg"
};
},
};
</script>
<style scoped>
</style>
Vue3.0
在Vue3中v-model由Vue2中的默认props==》value变成了modelValue
关系：
<v-child v-model="numm"></v-child>
<!-- 等同于 -->
<v-child
:modelValue="numm"
@input="(e) => (numm = e.target.value)"
></v-child>
首先看一下我们的子组件：
<template>
<div>
我是子组件
<input v-model="modelValue" type="text">
//22222222
<!-- <input v-model="modelValue" type="text" @input="changeNumm"> -->
</div>
</template>
<script>
import {
watch } from "vue";
export default {
name: "App",
props: {
modelValue: {
type: String,
},
},
setup(props, {
emit }) {
console.log("props===", props);
watch(
() => props.modelValue,
(newmodelValue) => {
emit("update:modelValue", newmodelValue);
}
);
//22222222
// function changeNumm(e) {
// emit("update:modelValue", e.target.value);
// }
// return {changeNumm}
},
};
</script>
modelValue：我们接受父级传来的modelValue变量
改变默认的@input方法，出发我们自己定义的方法；
在自己定义的方法中使用emit触发父级传来的方法update:modelValue
父级组件：
<template>
<div>
<p>我是父组件</p>
<input v-model="numm" type="text" />
<v-child v-model="numm"></v-child>
</div>
</template>
<script>
import vChild from "../com/child.vue";
import {
ref } from "vue";
export default {
name: "App",
components: {
vChild,
},
setup() {
let numm = ref("66");
return {
numm };
},
};
</script>
在父组件中通过v-model传入子组件，子组件通过props接收，如果还想改变传来的值并且同步到父级，使用emit来触发v-model默认传来的input事件，来改变，相当于触发父级 @input="(e) => (numm = e.target.value)"
