Vue v-model、model 的使用

vue v-model  语法糖

双向绑定 通过原生input的 value 跟 @input  实现

vue model 指定prop的值和监听的事件

model: {

        prop: 'value',

        event: 'input// 随便命名事件，对应下面$emit即可

}

1、text和textarea元素使用value属性和input事件

2、checkbox和radio使用checked属性和change事件

3、select使用value和change事件

实例：

 input v-model 子组件

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" :attr="$attrs"/>
</template>
<script>
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: String
  },
  mounted() {
    //$attrs 获取属性
  }
}
</script>

v-model 父组件调用

<template>
  <div class="contenr">
      <wk-input v-model="values" type="text"></wk-input>
  </div>
</template>
<script>
import WkInput from './component/wkInput'
export default {
  data() {
    return {
        values: '初始化'
    }
  },
  components: {
    WkInput
  }
}
</script>