vue 自定义组件 v-model 使用

v-model可以实现数据双向的绑定。
语法糖

 <input type="text" v-model="name">

实际上,上面的代码是下面代码的语法糖。

<input  v-bind:value="name"  v-on:input="name=$event.target.value"/>

开发过程中，有时我们需要自定义组件，需要父级的值和子组件的值双向绑定。

<template>
  <div class="v-input">
    <input type="text" v-model="dataValue" @input="$emit('input', $event.target.value)">
      // ...
  </div>
</template>
<script>
  export default {
    name: 'vInput',
    data: (vm) => ({
      dataValue: vm.value // 不能直接修改父级传的值，需要赋值到data，或用计算属性 computed 转一下
    }),
    props:{
      value: String
    }
  }
</script>

父级引入组件

<v-input v-model="parentValue">