vue3组件中v-model的使用以及深入讲解

更新时间：2021年09月26日 11:33:07 作者：Might°

在vue2中v-model使用的还是挺多的,不过这个指令一般是用在了输入框中,并且这个指令其实就是个语法糖,下面这篇文章主要给大家介绍了关于vue3组件中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>
  <!-- 组件绑定 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() {
                context.emit("update:modelValue","O(∩_∩)O哈哈~")
            }
        
            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() {
                context.emit("update:modelValue","O(∩_∩)O哈哈~")
            }
        
            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() {
                context.emit("update:modelValue","O(∩_∩)O哈哈~")
            }
            let customText = computed({
                set(value){
                    context.emit("update:text",value)
                },
                get(){
                    return props.text
                }
            })

            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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue el-date-picker动态限制时间范围案例详解
这篇文章主要介绍了vue el-date-picker动态限制时间范围案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
解决vue动态下拉菜单有数据未反应的问题
这篇文章主要介绍了解决vue动态下拉菜单有数据未反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue实现树形菜单效果
这篇文章主要为大家详细介绍了vue实现树形菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03
vue的rules验证部分可以部分又失效的原因及解决方案
vue的rules验证失效,部分可以部分又失效,很多百度都有,但是我这里遇到了一个特别的,那就是prop没有写全,导致验证某一个失效,接下来就跟小编一起来看看这个失效的原因和解决方案吧
2023-11-11
Vue2 Element Schema Form 配置式生成表单的实现
本文主要介绍了Vue2 Element Schema Form 配置式生成表单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
Element Badge标记的使用方法
这篇文章主要介绍了Element Badge标记的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
深入理解Vue2.x的虚拟DOM diff原理
本篇文章主要介绍了Vue2.x的虚拟DOM diff原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue使用mpegts.js的详细步骤记录
MPEGTS.js是一个轻量级的JavaScript库,用于处理MPEG-TS流,这篇文章主要给大家介绍了关于vue使用mpegts.js的详细步骤记录,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
vue实现PC端录音功能的实例代码
这篇文章主要介绍了vue实现PC端录音功能的实例代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
Element中table组件(el-table)右侧滚动条空白占位处理
当我设置了max-height,就会在表格右侧出现一列空白的占位,本文主要介绍了Element中table组件(el-table)右侧滚动条空白占位处理,感兴趣的可以了解一下
2023-09-09