zoukankan      html  css  js  c++  java
  • 自定义一个双向绑定组件

    父组件:

    <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">只显示数据,没有修改数据。

  • 相关阅读:
    数据库事务之不可重复读
    数据库事务与脏读
    图结构代码实现
    哈希表与散列函数
    数据库表设计与视图
    B树和B+树
    java之字符串中查找字串的常见方法
    剑指 Offer 15. 二进制中1的个数——JS
    剑指 Offer 03. 数组中重复的数字——JS
    算法设计与分析——排序
  • 原文地址:https://www.cnblogs.com/psxiao/p/11421057.html
Copyright © 2011-2022 走看看