• 自定义组件实现双向绑定v-model


      自定义组件实现 v-model 双向绑定,首先要先明白 v-model,这个指令到底实现了什么?

    v-model实际做的事情就是:传入一个value属性值,双向绑定会默认监听input事件并返回一个值
    在子组件 emit 一个 input 事件,并返回一个值,父组件调用 v-model 的时候会默认执行这个时间
    举个例子1:
      # 正常写法
      <input type="text" v-model="userName" />
      # 等价于这种写法
      <input type="text" :value="userName" @input="userName = $event.target.value" />

    举个例子2:
      # 自定义组件 <ButtonComponent /> 实现双向绑定
        ButtonComponent组件的写法:
        <button
          v-for="(item, index) in tabOptions"
          :key="item.$value"
          @click="handleTabSelect(item)">
          {{ item.$text }}
        </button>

        data:

          tabOptions = [{

            $text: "本地选择",

            $value: "local"

          } , {

          $text: "COS选择",

          $value: "cos"

          }] 

        methods:
          handleTabSelect(item) {

            // 子组件的input时间,当父组件的使用v-model的时候会触发
            this.$emit('input', item.$value);
        }

      使用组件 <ButtonComponent /> 直接使用v-mode的方式就能读取数据了

      <ButtonComponent v-model="tabValue" />

      等价于

      <ButtonComponent @input="handleValue"/>  

      data:

      tabValue="",

      methods:

      handleValue(value){

        this.tabValue = value;

      }

  • 相关阅读:
    OC-字典
    作业
    block语法排序 遍历
    oc-NSArray
    oc之获取系统当前时间的方法
    修改mysql的默认字符集
    mysql查询结果添加序列号
    PHP Socket 编程过程详解
    一篇详细的 Mysql Explain 详解
    阿里云云主机挂载数据盘,格式化硬盘(新购云主机)(转)
  • 原文地址:https://www.cnblogs.com/ChineseLiao/p/11401607.html
Copyright © 2020-2023  润新知