Vue中 v-model 和 :model 的区别

阅读目录

• 1、v-model
• 2、:model

Vue中 v-model 和 :model 的区别

回到顶部

1、v-model

• 通常用于表单上双向数据的绑定，如果除了表单其他组件使用时，起不到任何效果。

• 它还可以实现子组件到父组件的双向数据动态绑定。

  input上的v-model:

  <input v-model="price"><!-- 下行注释的语法糖 -->
   <!-- <input :value="price" @input="price = $event.target.value"> --> // $event.target.value 就是把input的值赋值给 price
  

  组件上的v-model：

  父组件Home：

  <template><HomeChild v-model="vModelData"></HomeChild>
  </template>
  <script>
  import HomeChild from './child/HomeChild.vue'
  export default {
      name: 'Home',
      components: { HomeChild },
      data () {
          return {
              vModelData: 'hello v-model'
          }
      }
  }
  </script> 
  

  子组件HomeChild：

  <template>
  <div class="box">
      <span>{{ value }}</span>
      <button @click="testVModel">测试v-model</button>
  </div>
  </template>
  
  <script>
  export default {
      name: 'HomeChild',
      props: { value: { type: String, default: '' }},
      methods: { 
          testVModel () {
              this.$emit('input', '我是子组件'); <!--子组件触发input事件来改变value的值-->
          }
      }
  }
  </script> 
  
  

  ​

回到顶部

2、:model

:model是v-bind:model的缩写。

只是将父组件的值传递给和子组件，但是并未实现子组件和父组件之间的双向数据绑定。

如：

<child :model="msg"></child> <!--只是将父组件的数据传递到子组件-->

引用类型除外，子组件改变了引用类型的数据的话，父组件的数据也会跟着改变。

引用类型有这几种：Object、Array、RegExp、Date、Function；特殊的基本包装类型(String、Number、Boolean)以及单体内置对象(Global、Math)。