v-model的理解

v-model不仅可以用在input表单上，还可以用到其他表单元素上，还可以用在自定义组件上。

v-model 在内部为不同的表单输入元素使用不同的 property ，并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

v-model作用在自定义组件上，

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件；比如引入组件A：

<A v-model="xx" /> 相当于 <A :value='xx' @input='input'/>其中的input（val）{this.xx = val}

例子；

父组件：
<template>
  <div id="app">
    <!-- <A :value="age" @input="input" /> -->
    <A v-model="age" />
  </div>
</template>

<script>
import A from './components/A.vue';
export default {
  name: 'App',
  data() {
    return {
      age: 0,
    };
  },
  components: {
    A,
  },
  methods: {
    // input(value) {
    //   this.age = value;
    // },
  },
};
</script>

//组件A：
<template>
  <div class="a-container" >
    <input type="text" :value="value" >
    <p><button @click='change(value+1)'>+</button></p>
    <p><button @click='change(value-1)'>-</button></p>
    <!-- <B/> -->
  </div>
</template>

<script>
export default {
  props:{
    value:{
      type:Number,
      default:1
    }
  },
  methods:{
   change(val){
     console.log(val);
     this.$emit('input',val)
   }
  }
}
</script>

修改默认的prop：value和event：input，可以用在组件中定义model属性，

<template>
  <div class="a-container">
    <input type="text" :value="number" />
    <p><button @click="change(number + 1)">+</button></p>
    <p><button @click="change(number - 1)">-</button></p>
    <!-- <B/> -->
  </div>
</template>

<script>
export default {
  model: {
    prop: 'number',
    event: 'change',
  },
  props: {
    number: {
      type: Number,
      default: 1,
    }
  },
  // props:{
  //   value:{
  //     type:Number,
  //     default:1
  //   }
  // },
  methods: {
    // change(val) {
    //   console.log(val);
    //   this.$emit('input', val);
    // },
     change(val) {
      console.log(val);
      this.$emit('change', val);
    },
  },
};
</script>

<style>
</style>

 

    个人感觉用处不大，多写一个父组件上的一个属性和方法而已