详解vue中的v-model-Toy模板网

这篇具有很好参考价值的文章主要介绍了详解vue中的v-model。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

序：v-model是v-bind和v-on:input的结合，即监听了表单的input事件，然后修改value属性对应的值

一、vue单文件中使用v-model

众所周知，当我们使用v-bind绑定prop时，数据流的流向是从model层流向view层，被v-bind绑定的prop会从data中读取属性值；

那么如何实现既能让数据从model层流向view层，又能从view层流向model层的双向数据绑定呢？这个时候就需要使用到指令v-model,指令v-model的本质是一个语法糖，他是:value & @ input 的简写形式；

具体代码如下：

<template>
  <div class="container">
    <h1>父组件{{num}}</h1>
    <!-- 普通写法 -->
    <input type="text" :value="num" @input="num = $event.target.value">
    <!-- 使用v-model -->
    <!-- <input type="text" v-model="num"> -->
    <hr>
  </div>
</template>

<script>
export default {
  data(){
    return {
      num:100
    }
  }
}
</script>

二、父子组件传值时使用 v-model

注：v-model <=> v-bind:value & @input = 'value = $event'

父组件

<template>
  <div class="container">
    <h1>父组件{{num}}</h1>
    <hr>
    <myInput v-model.number='num'/>
  </div>
</template>

<script>
import myInput from '../components/myInput.vue'
export default {
  components:{myInput},
  data(){
    return {
      num:100
    }
  }
}
</script>

子组件

<template>
  <div class="container">
    <h1>子组件</h1>
    <input type="text" :value="value" @input="handleInput">
  </div>
</template>

<script>
export default {
    name:'myInput',
    props:{
        value:{
            type:Number,
            require:true
        }
    },
    methods:{
        handleInput(e){
            this.$emit('input',e.target.value)
        }
    }
}
</script>

三、进阶

以上这种方式实现的父子组件的v-model通信，但是限制了子组件中props接收的属性名必须为value和emit触发的必须为input，这样容易有冲突，特别是在表单里面。所以，为了更优雅的使用v-model通信，可以在子组件中使用model选项;

子组件进阶代码文章来源地址https://www.toymoban.com/news/detail-594904.html

<template>
  <div class="container">
    <h1>子组件</h1>
    <input type="text" :value="abc" @input="handleInput">
  </div>
</template>

<script>
export default {
    name:'myInput',
    /**
     * model - 用来避免冲突
     * prop属性用来指定props属性中的哪个值用来接收父组件v-model传递的值(例如:这里用props中的abc来接收父组件传递的v-model值);
     * event属性可以理解为父组件@input的别名，从而避免冲突，即emit时要提交的事件名。
     */
    model:{
        prop:'abc',
        event:'ABC'
    },
    props:{
        abc:{
            type:Number,
            require:true
        }
    },
    methods:{
        handleInput(e){
            this.$emit('ABC',e.target.value)
        }
    }
}
</script>

到了这里，关于详解vue中的v-model的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！