vue3中的v-model
Posted 奥特曼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3中的v-model相关的知识，希望对你有一定的参考价值。
目录
在vue3.0中的v-model中和vue2.0的v-model略有不同 先举个双向绑定的例子 之后再来总结
一、单个v-model
效果图
父组件
<template>
<div>
<input type="text" v-model="msg" >
<son v-model="msg"></son>
<!--上面等价于下面-->
<!--<son :modelValue="msg" @updata:modelValue="val=>msg=val">></son>-->
</div>
</template>
<script>
import son from "./son";
import {ref} from 'vue'
export default {
components: {
son,
},
setup(){
const msg = ref('奥特曼')
return {msg}
}
};
</script>子组件
<template>
<div>
<input type="text" :value="modelValue" @input="number" />
</div>
</template>
<script>
export default {
name:'son',
props: {
modelValue: {
default: "",
type: String,
},
},
setup(props,context) {
const number = (e)=>{ context.emit('update:modelValue',e.target.value) };
return { number };
},
};
</script>
<style scoped>
</style>简写
<input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" />单个v-model总结
父组件
<son v-model="msg"></son>
等价于
<son :modelValue="msg" @updata:modelValue="val=>msg=val">></son>
子组件
<input type="text" :value="modelValue" @input="number" />
setup函数中没有this 通过第二个参数进行传值
setup(props,context) {
const number = (e)=>{ context.emit('update:modelValue',e.target.value) };
return { number };
},等价于 如果不用setup 可以通过模板进行传值
<inputtype="text":value="modelValue"@input="$emit('update:modelValue',$event.target.value)"/>
二、多个v-model
效果图
父组件
<template>
<div>
<br>
父组件
name： <input type="text" v-model="msg" >
年龄： <input type="text" v-model="age" name="" id="">
<son v-model="msg" v-model:age="age"></son>
<!-- <son :modelValue="msg" @update:modelValue="val=>msg=val" :age="age" @update:age="val=>age=val"></son> -->
</div>
</template>
<script>
import son from "./son";
import {ref} from 'vue'
export default {
components: {
son,
},
setup(){
const msg = ref('奥特曼')
const age = ref('20')
return {msg,age}
}
};
</script>子组件
<template>
<div>
子组件 name: <input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" />
<!-- 子组件 name: <input type="text" :value="modelValue" @input="setName" /> -->
年龄: <input type="text" :value="age" @input="$emit('update:age',$event.target.value)" />
<!-- 年龄: <input type="text" :value="age" @input="setAge" /> -->
</div>
</template>
<script>
// import {ref} from 'vue'
export default {
name:'son',
props: {
modelValue: {
default: "",
type: String,
},
age:{
default: "",
type: String,
}
},
setup(props,context) {
const setName = (e)=>{ context.emit('update:modelValue',e.target.value) };
const setAge = (e)=>{ context.emit('update:age',e.target.value) };
return { setName,setAge };
},
};
</script>总结
vue2.0中的 v-model
| 父组件 | <son v-model="message"></son> 等价于 <son :value="message" @input="(val)=>message=val"></son> |
| 子组件 | <input type="text" :value="value" @input="$emit('input',$event.target.value)"> props: ['value'] |
| 特点 | 只能绑定一次 如果想要多个传值通信 需要.sync修饰符 |
vue3.0中的 v-model
| 父：单个v-model | <son v-model="msg"></son> 等价于 <son :modelValue="msg" @updata:modelValue="val=>msg=val">></son> |
| 子 | <input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" /> props:['modelValue'] |
| 父：多个v-model | <son v-model="msg" v-model:age="age"></son> 等价于 |
| 子 | <input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" /> <input type="text" :value="age" @input="$emit('update:age',$event.target.value)" /> props:['modelValue','age'] |
| 特点 | 可以绑定多次 vue3.0 中移去了.sync修饰符 v-bind时不能使用.sync修饰符了，现在它v-model语法合并了 |
补充
vue2.0中的 sync
| 单个.sync | <son :abc.sync="message"></son> 等价于 <son message=val" @update:abc=>val=>message=val"></son> |
| 多个.sync | <son :abc.sync="message" :bcd.sync="age">son</son> 等价于 |
以上是关于vue3中的v-model的主要内容，如果未能解决你的问题，请参考以下文章