自定义组件实现双向数据绑定

vue自定义组件双向数据绑定：

定义组件component:

子组件：

html

<input type="text" @input="handleInput" :value="value">

js

<script>
     export default {
          name: "component",
       props:['value'],
       methods:{
         handleInput (e) {
           this.$emit('input',e.target.value)
         }
       }
     }
父组件：
html:

<InputText :value="value" @input="value = arguments[0]" ></InputText>
js:

<script>
  import InputText from './component'
export default {
  name: 'HelloWorld',
  components:{
    InputText
  },
  data () {
    return {
      value: '113'
    }
  }
}

在这里子组件通过方法handleInput发射事件input,通过props接收父组件的传递给子组件的value值，父组件负责监听子组件的发射的事件input,得到的值value是第一个参数
因此可以可以写成v-model="value",如下：
父组件

<InputText v-model="value"></InputText>
子组件：

<input type="text" @input="handleInput" :value="value1">

这样就实现了自定义组件的双向数据绑定
也可以在子组件中加入model对象定义从父组件获取的数据及发射的事件方法，如下：
html:

<input type="text" @input="handleInput" :value="value1">

js:

<script>
     export default {
          name: "component",
       model :{
prop:'value1',
         event:'change'
       },
       props:['value1'],

       methods:{
         handleInput (e) {
           this.$emit('change',e.target.value)
         }
       }
     }
在这里model对象定义父组件获取的数据value和向父组件监听的时间change