Vue之v-model

Posted 2021-03-14 xujunkai

v-model

• Vue中v-model能实现数据的双向绑定，实现父子组件通信...

1.v-model用在input元素上

• 虽然Vue是单项数据流，v-model只是一个语法糖，实现双向数据的绑定：

  <input v-model="msg" />
  
  <input v-bind:value="msg" @input="msg = $event.target.value" />

  • 第一行代码等价于第二行

    input 元素本身有个 oninput 事件，这是 html5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 msg

  给input标签添加v-model属性，默认会把value作为元素的属性，然后把input事件作为实时传递value的触发事件

• 小示例：

  <div id="exp">
      <input type="text" v-model="msg">
      <span>{{msg}}</span>
  </div>
  <script>
      var vm = new Vue({
          // el限制一个vue实例的管理范围。
          el:"#exp",
          data:{
              msg:""
          }
      });
  
  </script>

2.v-model用在组件上

• 当然v-model还可以用在组件上，更改子组件的值父组件的price也实时变化，以官方例子：

  <div id="exp2">
      <!-- 等价于  v-bind:value="price" @input="price = arguments[0]"-->
      <currency-input v-model="price"></currency-input>
      <span>{{price}}</span>
  </div>

      // 定义组件
      Vue.component('currency-input',{
          props:['value'],
          template:`
          <input ref="ipt" :value="value" @input="$emit('input',$event.target.value)">
          `
      });
  
  
  
      var vm2 = new Vue({
          el:"#exp2",
          data:{
              price:100
          }
      })

3.v-model缺点和解决方法

• 在创建类似复选框或者单选框的常见组件时，v-model就不好用了。

• 在input框解决方式

  <div id="exp3">
      <input type="checkbox" :checked="status" @change="status=$event.target.checked">
  </div>
  <script>
      var vm3 = new Vue({
          el:"#exp3",
          data:{
              status:false
          },
  
      })
  </script>

• 当v-model用在组件上：

  <div id="exp4">
      <my-checkbox v-model="cks"></my-checkbox>
  </div>
  <script>
      Vue.component('my-checkbox',{
          props:['value'],
          template: `
              <input type="checkbox" :checked="value" @change="$emit('input',$event.target.checked)">
          `
      });
      var vm4 = new Vue({
          el:"#exp4",
          data:{
              cks:false
          }
      })
  </script>