怎么在vue2組件中對(duì)select2進(jìn)行調(diào)用？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有威海免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

select下拉搜索選擇

這次的需求調(diào)研與設(shè)計(jì)是原來(lái)做winform開(kāi)發(fā)的同事，由于用慣了devexpress這個(gè)控件庫(kù)，所以，對(duì)于searchlookupeditor這個(gè)控件情有獨(dú)鐘，所以，在設(shè)計(jì)的時(shí)候，許多地方都用到。

最初實(shí)現(xiàn)

最初，我使用了select2綁定select標(biāo)簽，設(shè)定其change事件 ，在事件中修改對(duì)應(yīng)的vue的data值，同時(shí)，在vue中設(shè)定watch``data中被綁定的屬性，屬性值發(fā)生變化，則修改對(duì)應(yīng)的dom的val，然后再觸發(fā)select2的change事件。當(dāng)然，這種對(duì)應(yīng)關(guān)系，我在select標(biāo)簽上放了一個(gè)data-vuep來(lái)保存其與vue屬性的對(duì)應(yīng)關(guān)系，并放在全局的select2vue和dom2vue中。

//mounted中的部分代碼
            select2vue = {};
          $("select").each(function (index, item) {
            var s2 = $(item).select2({
              language: "zh-CN", //設(shè)置 提示語(yǔ)言
              width: "100%", //設(shè)置下拉框的寬度
              theme: "classic",
              placeholder: "請(qǐng)選擇"
            }).on("change", function (e) {
              console.log(e);
              var v = $(e.target).val();
              var p = $(e.target).attr("data-vuep");
              eval("vue_cust_busi." + p + "='" + v + "';");
              //$(e.target).find("option").attr("selected",false);
              //$(e.target).find("option[value='"+v+"']").attr("selected",true);
            });

            var p = $(item).attr("data-vuep");
            select2vue[p] = s2;
            dom2vue[p] = item;
          });
          setTimeout(function(){
            vue_cust_busi.editor.ID_CUST="3";
            vue_cust_busi.editor.NAME_CUST="*有限責(zé)任公司";
            console.log("修改");
          },10,null);


//watch中的部分代碼
          "temp.P1": function (val) {
            fire(arguments.callee.name.toString(), val);

          },
//通用函數(shù)

    function fire(p, val) {
      $(dom2vue[p]).val(val);
      select2vue[p].trigger("change");
    }

//html

                         
                              
                            {{yearOpt}} 
                        

為什么要用一個(gè)data-vuep來(lái)將數(shù)據(jù)與vue的屬性關(guān)聯(lián)呢，因?yàn)槲野l(fā)現(xiàn)，select2初始化了這個(gè)select標(biāo)簽之后，修改這個(gè)標(biāo)簽的值無(wú)法觸發(fā)修改vue對(duì)應(yīng)的v-model的屬性。所以，只能用這個(gè)方法。
 最終形成的結(jié)果是：

select2到vue.editor.P1：
1.select2被選擇某一項(xiàng)，觸發(fā)其change事件。
2.select2的change事件修改vue.editor.P1的值。
3.vue.editor.P1的值被修改，觸發(fā)watch，watch又引發(fā)select2的change事件，但是，select2內(nèi)部監(jiān)控到選擇和之前的一致，所以，不再執(zhí)行change事件的委托。

上面這種流程一定程度是實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，但是，非常復(fù)雜。在后續(xù)的使用中發(fā)現(xiàn)，在mounted中無(wú)法為select2默認(rèn)值，必須在mounted中調(diào)用setTimeout生成一個(gè)定時(shí)執(zhí)行的事件來(lái)執(zhí)行數(shù)據(jù)綁定操作，才會(huì)觸發(fā)上述流程，達(dá)到設(shè)定觸始值的效果。

使用vue指令

經(jīng)過(guò)一番掙扎，覺(jué)得上面這種方式還是不行。

上述方案不好的原因如下：

1.vue事件中的代碼操作了dom，這樣，在生命周期上可能會(huì)出現(xiàn)問(wèn)題，特別是后來(lái)使用了setTimeout之后，生命周期變得更加不可控制。
2.每增加一個(gè)select組件，都需要增加 html標(biāo)簽、watch，而且，html 標(biāo)簽和watch既不是傳統(tǒng)的寫(xiě)法，也不是vue的寫(xiě)法，而是發(fā)明了一種新的東西，這破壞了開(kāi)發(fā)體驗(yàn)。
3.維護(hù)性比較差，當(dāng)想刪除一個(gè)select的時(shí)候，必須要去watch里面去找與html中data-vuep相等的屬性監(jiān)控方法，并將其刪除掉。
4.兼容性不好，本方案選擇將頁(yè)面所有的select全部用select2初始化了一次，使得不論是否需要的，都會(huì)被影響；其次，如果不統(tǒng)一初始化，那么又多出了在mounted中為每一個(gè)select寫(xiě)初始化代碼的工作，同時(shí)，也要為每個(gè)select取一個(gè)id。

為了解決這個(gè)問(wèn)題，我又找到了最初看到的那個(gè)vue使用指令和select2的整合的例子。網(wǎng)上有好多，我不知道版權(quán)是誰(shuí)的，姑且上我最先看到的那個(gè)吧。https://www.jb51.net/article/125654.htm

原文中的代碼如下:

  
  
  
  
  
  
    .content{
      text-align: center;
      padding:50px;
    }
    .content *{
      text-align: left;
    }
    .select{
      width: 350px;
    }
  


  
    
    

    結(jié)果：{{ selectValue }}
  

Vue.directive('select2', {
      inserted: function (el, binding, vnode) {
        let options = binding.value || {};

        $(el).select2(options).on("select2:select", (e) => {
          // v-model looks for
          // - an event named "change"
          // - a value with property path "$event.target.value"
          el.dispatchEvent(new Event('change', { target: e.target })); //說(shuō)好的雙向綁定，竟然不安套路
          console.log("fire change in insert");
        });
      },
      update: function (el, binding, vnode) {
        for (var i = 0; i < vnode.data.directives.length; i++) {
          if (vnode.data.directives[i].name == "model") {
            $(el).val(vnode.data.directives[i].value);
            console.log("new value in update:"+vnode.data.directives[i].value);
          }
        }
        $(el).trigger("change");
        console.log("fire change in update");
      }
    });

//html代碼


 
 {{item.NAME}}