Vue中v-model原理
通过父子组件通信揭开v-model实现原理
父子组件通信
App.vue
javascript
<template>
<p>父组件:{{num}}</p>
<hello-world :num="num" @change="change"></hello-world>
</template>
<script setup>
import {ref} from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const num = ref(0);
function change(value){
num.value = value;
}
</script>
HelloWorld.vue
javascript
<template>
<p>子组件:{{numProps.num}}</p>
<button @click="add">add</button>
</template>
<script setup>
const numProps = defineProps({
num:Number
});
const emit = defineEmits("change");
function add(){
emit('change',numProps.num+1);
}
</script>
改变变量名称和方法名称
App.vue
javascript
<template>
<p>父组件:{{num}}</p>
<hello-world :modelValue="num" @update:modelValue="change"></hello-world>
</template>
<script setup>
import {ref} from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const num = ref(0);
function change(value){
num.value = value;
}
</script>
HelloWorld.vue
javascript
<template>
<p>子组件:{{numProps.modelValue}}</p>
<button @click="add">add</button>
</template>
<script setup>
const numProps = defineProps({
modelValue:Number
});
const emit = defineEmits("update:modelValue");
function add(){
emit('update:modelValue',numProps.modelValue+1);
}
</script>
简写向子组件通信
App.vue
javascript
<template>
<p>父组件:{{num}}</p>
<hello-world v-model:="num"></hello-world>
</template>
<script setup>
import {ref} from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const num = ref(0);
</script>
简写子组件
HelloWorld.vue
javascript
<template>
<input type="text"
:value="modelValue"
@input="(e) => $emit('update:modelValue',e.target.value)"/>
<!-- <input type="text"
:value="modelValue"
@input="$emit('update:modelValue',$event.target.value)"/>-->
</template>
<script setup>
defineProps({
modelValue:Number
});
defineEmits("update:modelValue");
</script>