vue-:model和v-model的区别

2020-12-15 10:34:01 阅读：160 来源： 互联网

父组件

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

　子组件

 1  Vue.component('child', {
 2       props: ['value'],
 3       template: '<input type="text" @input="handleInput" :value=value />',
 4       methods: {
 5         handleInput(e){
 6           console.log(e);
 7           this.$emit('input', e.target.value);
 8         }
 9       }
10     })
11    new Vue({
12     el:'#example',
13     data:{
14       msg:'好天气',
15       parentMsg:''
16     }
17    })

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

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

本质是：

v-model是内置的数据双向绑定

model是绑定自定义属性model ，model相当于 v-bind:model

标签：vue,区别,绑定,value,改变,组件,输入框,model
来源： https://www.cnblogs.com/tdcqcrtd/p/14137129.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-:model和v-model的区别