vue使用填坑之:model和v-model的区别

Posted baibabai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用填坑之:model和v-model的区别相关的知识,希望对你有一定的参考价值。

首先说说v-model的用法:

父组件: 

   

 <div>
      <input type="text" v-model=‘msg‘>
      <child v-model=‘msg‘></child>
  </div>

子组件: 

 

技术图片
 Vue.component(‘child‘, 
      props: [‘value‘],
      template: ‘<input type="text" @input="handleInput" :value=value />‘,
      methods: 
        handleInput(e)
          console.log(e);
          this.$emit(‘input‘, e.target.value);
        
      
    )
   new Vue(
    el:‘#example‘,
    data:
      msg:‘好天气‘,
      parentMsg:‘‘
    
   )  
技术图片

 

 

无论改变父组件还是子组件的输入框,value和msg的值都会改变,两个输入框的值也就同时改变了。

 

 :model和v-model的区别
     :model是v-bind:model的缩写,<child :model="msg"></child>这种只是将父组件的数据传递到了子组件,并没有实现子组件和父组件数据的双向绑定。当然引用类型除外,子组件改变引用类型的数据的话,父组件也会改变的。

 

原文链接:https://www.cnblogs.com/xuzhudong/p/8617487.html

以上是关于vue使用填坑之:model和v-model的区别的主要内容,如果未能解决你的问题,请参考以下文章

vue爬坑之input组件

vue填坑之引入iconfont字体图标

请问vuejs里的v-model 和:model有啥区别

v-model和v-bind.sync的区别

Vue中v-model基本使用

vue中 .sync 和 v-model 的区别