自定义一个双向绑定组件

<k-input v-model="model.username"></k-input>

<template>
    <div>
     <!--实现自定义组件双向绑定
      v-model是语法糖，实现自定义组件双绑定需要指定 :value和@input即可-->
      <input type="text" :value="value" @input="onInput">
    </div>
</template>

<script>
    export default {
        name: "KInput",
      props:{
          //传进来的value值，只显示不修改
          value:{
            type:String,
            default:‘‘
          },
      },
      methods: {
        onInput(e) {
          console.log(e)
          //派发事件，通知父组件输入值发生变化
          //将e.target.value赋值给username
          this.$emit(‘input‘,e.target.value)
         /* 在这里子组件通过方法onInput发射事件input,
            通过props接收父组件的传递给子组件的value值，
            父组件负责监听子组件的发射的事件input,得到的值value是第一个参数*/
        }
      },
    }
</script>