首页 > 建站教程 > 前端框架 >  vue3组件中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帮我们做了一个简单的封装。


注意:默认v-model绑定的数据在子组件读取需要使用 modelValue来接收 发射事件默认叫update:modelValue ,想绑定多个值或者采用自定义名请看下面的其他写法哦

注意:不能想通过修改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中的值就好了。