自定义组件实现双向绑定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;

  }

原文地址:https://www.cnblogs.com/ChineseLiao/p/11401607.html