vue3组件中v-model的使⽤以及深⼊讲解引擎奖
⽬录
v-model input中使⽤双向绑定数据
组件中的v-model
其他写法
总结
v-model input中使⽤双向绑定数据
v-model在vue中我们经常⽤它与input输⼊框的输⼊值进⾏绑定，简单的实现原理⼤家也应该都知道通过v-bind绑定value值及结合@input输⼊事件动态改变绑定的value值来实现双向绑定，如下vue3实现代码:
<template>
<input type="text" :value="tryText" @input="handelInput">
<h2>{{tryText}}</h2>
</template>
<script>
import { ref} from "vue"
export default {
setup(){
let tryText = ref("默认输⼊值")
function handelInput(e) {
tryText.value = e.target.value;//ref定义的数据访问和修改需要通过.value
}
return{
tryText,
handelInput
}
}
}
</script>
相信⼤家经常使⽤v-model在ipnut中，现在让我们来看看在组件中如何使⽤v-model以及它的作⽤是啥
组件中的v-model
组件中如何使⽤v-model呢？我们来简单实现下
⽗组件
<template>美规宝马x5配置
<!-- 组件绑定 v-model -->
<hy-input v-model="message"></hy-input>
<h2>{{message}}</h2>
</template>
<script>
import {  ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {
三亚租车自驾components: {HyInput },
setup(){
let message = ref("嘿嘿嘿ヽ(*^ ^)(^ ^*)ノ")
return{
message,
}
}
}
</script>
⼦组件
<template>
<button @click="handelClick">O(∩_∩)O哈哈~</button>
<br>
</template>
<script>
export default {
props:{
modelValue:String,
},
emits:['update:modelValue'],
setup(props,context){
function handelClick() {
}
return{
handelClick,
}
}
}
</script>
看到这⾥我们可能会有点疑点为啥要发射事件呢？为啥会有⼀个默认的props接收值呢？别急我们从实现原理上看看就懂了这样我们点击⼦组件的按钮就可以改变⽗组件中的message的数据，这就是⼀个简单的组件中的数据双向绑定v-model实现既然是双向绑定，那不妨⼤胆猜测下是否和input中的实现原理相似呢？让我们来看看它的实现原理
⽗组件
<template>
<!-- 原理 -->
<hy-input :modelValue="message" @update:modelValue="message = $event"></hy-input>
<h2>{{message}}</h2>
</template>
<script>
import {  ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {
components: {HyInput },
setup(){
let message = ref("嘿嘿嘿ヽ(*^ ^)(^ ^*)ノ")
return{
message,
}
}
}
全新一代唐
尼桑骐达</script>
⼦组件不变哦
<template>
<button @click="handelClick">O(∩_∩)O哈哈~</button>
<br>
</template>
<script>
export default {
props:{
modelValue:String,
},
emits:['update:modelValue'],
setup(props,context){
function handelClick() {
}
return{
handelClick,
}
}
}
</script>
通过结果我们发现确实可以实现
这样我们就能很好理解⼦组件中的发射事件和默认接收值了，基本实现原理就是：⽗组件传值给⼦组件，⼦组件通过props进⾏接收，但是在⼦组件中需要修改改数据时，我们通过发射⼀个事件告诉⽗组件，然后⽗组件接收传递过来的值进⾏修改。其实就是⽗⼦组件之间的通信，不过vue帮我们做了⼀个简单的封装。
ps：默认v-model绑定的数据在⼦组件读取需要使⽤ modelValue来接收发射事件默认叫update:modelValue ，想绑定多个值或者采⽤⾃定义名请看下⾯的其他写法哦
ps：不能想通过修改props来修改数据，⾸先这是⼀个特别不好的开发习惯，然后我们知道props的特性只是负责传递数据，修改props并不能达到我们想要的效果。我们应该通知⽗组件进⾏数据更新，这才是最好的做法。
其他写法
如果我们⼦组件中的input和⽗组件进⾏双向绑定那该怎么实现呢？以及需要传递多个双向绑定数据呢？⾃定义名呢？
⽗组件
<template>
<!-- 组件绑定 v-model -->
<hy-input v-model="message" v-model:text="inputText"></hy-input>
<h2>{{message}}</h2>
<h2>{{inputText}}</h2>
</template>
<script>
import {  ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {
components: {HyInput },
setup(){
let message = ref("嘿嘿嘿ヽ(*^ ^)(^ ^*)ノ")
let inputText = ref("嘻嘻嘻嘻")
return{
message,
inputText
}
}
}
</script>
⼦组件
<template>
<button @click="handelClick">O(∩_∩)O哈哈~</button>
<br>
<input type="text" v-model="customText">
<br>
</template>
<script>
import {computed} from "vue"
export default {
props:{
modelValue:String,
text:String
},
emits:['update:modelValue',"update:text"],
setup(props,context){
function handelClick() {
}
let customText = computed({
set(value){
豫it("update:text",value)
},
get(){
}
})
return{
handelClick,
customText,
}
}
}
</script>
多个绑定值及改名写法 v-model:text=“inputText” ⼦组件中props直接是 text 发射事件名是 update:text
这⾥我们看到为了实现⼦组件中输⼊框v-model双向绑定⽗组件，我们需要借助计算属性computed来实现，可能有同学会想直接绑定props中的text不就可以了吗？还是上⾯那句话，若只是读取确实可以绑定，但是当你修改的时候是需要通过发射事件通知⽗组件进⾏数据更新(不能修改props中的值，只能读).所以在计算属性中我们在set中发射了事件进⾏⽗组件数据更新，读取时我们则直接读取props中的值就好了。
总结
到此这篇关于vue3组件中v-model使⽤以及讲解的⽂章就介绍到这了，更多相关vue3组件v-model使⽤内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！