自定义一个双向绑定组件

Posted 2022-09-03 psxiao

父组件：

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

子组件KInput：

<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>

这样就可以实现自定义组件双向数据绑定了：

子组件通过监听input把最新的值e.target.value派出去，然后父组件通过v-model更新模型，模型更新也会导致传进来的props发生改变展示在子组件value上。

该过程是单向流的，因为<input type="text" :value="value" @input="onInput">只显示数据，没有修改数据。