v-model

RiverLi 發(fā)布于2019-08-21 11:53 / 2634人閱讀

摘要：用法中比較基礎(chǔ)的用法是在表單控件中，創(chuàng)建雙向數(shù)據(jù)綁定，能夠更新數(shù)據(jù)并負(fù)責(zé)監(jiān)聽用戶的輸入事件實例代碼這里是監(jiān)聽了輸入框的事件，并將其賦值給。找到的父組件就是組件，里面沒有注冊任何方法只是了屬性。因為在也是利用了的語法糖。

Vue v-model 用法

vue 中v-model 比較基礎(chǔ)的用法是在表單控件中，創(chuàng)建雙向數(shù)據(jù)綁定，能夠更新數(shù)據(jù)并負(fù)責(zé)監(jiān)聽

用戶的輸入事件

實例代碼

    
    Message is: {{ message }}
    // 這里是監(jiān)聽了輸入框的input 事件，并將其value賦值給message。
    ==》

詳細(xì)解釋

這里根據(jù)文檔上看，指出v-model 只是一種語法糖，同樣使用checkbox 時，我們也使用了v-model 來更新當(dāng)前復(fù)選框是不是在被選中狀態(tài)，這里監(jiān)聽的是change 事件，

在checkbox 中，就可以使用value屬性去做其它事情，
v-model 指令對于不同的 type 類型會綁定在不同的事件上，查看vue.common.js 中的代碼就可以發(fā)現(xiàn)：

    if (el.component) {
        genComponentModel(el, value, modifiers);
        // component v-model doesn"t need extra runtime
        return false
      } else if (tag === "select") {
        genSelect(el, value, modifiers);
      } else if (tag === "input" && type === "checkbox") {
        genCheckboxModel(el, value, modifiers);
      } else if (tag === "input" && type === "radio") {
        genRadioModel(el, value, modifiers);
      } else if (tag === "input" || tag === "textarea") {
        genDefaultModel(el, value, modifiers);
      } else if (!config.isReservedTag(tag)) {
        genComponentModel(el, value, modifiers);

checkbox

v-model會根據(jù)input 標(biāo)簽中的type 類型不同，相應(yīng)的使用不同的方法。

再看到 type=“checkbox” 對應(yīng)的方法，

    this.listener = function () {
        var model = self._watcher.value;   // 獲取綁定指令 的 數(shù)組，在chang 事件發(fā)生時，時刻操作value 數(shù)組的變化
        if (isArray(model)) {
          var val = self.getValue();
          if (el.checked) {
            if (indexOf(model, val) < 0) {     //  checkbox 已經(jīng)被勾選后，首先在model數(shù)組中查找有沒有被勾選checkbox 的對應(yīng)value，沒有的的話就加入進(jìn)去，這里也可以推斷出在v-model 綁定在一組checkbox中時，可以記錄所有的選中的值。
              model.push(val);
            }
          } else {                           // checkbox 被取消，就在model中 刪除checkbox 對應(yīng)的value,
            model.$remove(val);
          }
        } else {
          self.set(getBooleanValue());
        }
      };
      //   將this.listener 函數(shù)綁定到 input　的　chang 事件中去， 在checkbox 發(fā)生變化時，
      this.on("change", this.listener);

上面也是從vue.js 中截取的代碼，就可以用來解釋官網(wǎng)中這段實例:


Jack

John

Mike


Checked names: {{ checkedNames }}

里面的checkedNames 可以保存所有已經(jīng)被勾選的input 對應(yīng)的value ,還不會有重復(fù)的值。

ElementUI elCheckboxGroup

官方示例
然后就聯(lián)想到了ElementUI中和兩個組件嵌套在一起使用的場景

checkAll數(shù)組中就保存著內(nèi)部 elCheckbox 組件對應(yīng)所有已經(jīng)勾選的數(shù)組，

查看ElementUI 源碼中 checkbox.vue 對應(yīng)文件（只截取對應(yīng)功能片斷）：

checkbox.vue

template:
  
   
script:
    methods:{
           handleChange(ev) {
            this.$emit("change", ev);
            if (this.isGroup) {
              this.$nextTick(_ => {
                this.dispatch("ElCheckboxGroup", "change", [this._checkboxGroup.value]);  // 自定義dispatch 方法，向上遍歷找到parent組件 名字是ElCheckboxGroup 的父組件，并觸發(fā)對應(yīng)的change事件。
          });
        }
      }
      }

this.dispatch 找到的父組件就是 checkboxGroup組件，

 checkboxGroup.vue
   
   template   
   
     
     
   

  //里面沒有注冊任何 change 方法

script :

   watch: {
      value(value) {
        this.dispatch("ElFormItem", "el.form.change", [value]);
      }
    }
   // 只是watch 了value 屬性。

因為在　