自定义组件的v-model

v-model

v-model的本质是 :value和@input="test=$event.target.value"的语法糖

• 修饰符
  v-model.lazy 事件触发后将输入框的值与数据进行同步 添加lazy 转变为与change事件同步(焦点移除时触发)
v-model.trim 去除字符串收尾的空格
v-model.number 将输入转化为数值类型

 //父组件
 <div>
    <button>{{count}}</button>
    <my-component v-model="count"></my-component>
  </div>
 // 子组件
 <template>
  <div>
    <input type="text" :value="value" />
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  name: "default1",
  props: ["value"],
  data () {
    return {
      count: 1,
    }
  },
  methods: {
    handleClick () {
      this.$emit("input", 2) //("input",$event)
    }
  }

}

• 自定义事件
  
  在使用v-model的时候只能使用一次,对其他数据进行双向绑定的时候需要 子->父,父->子组件间传值,比较麻烦。此时可以使用修饰符 .sync

父组件: :formData.sync='formData'
子组件: this,$emit('update:formData',{})