今天寫一個公眾號的項目，寫了一個vue的搜索組件，點擊搜索框時，背景出現一個遮罩，代碼結構如下：

  template:`<div class="searchBar-div">
  <input v-model="keyWord"
    @keyup.enter=‘startSearch()‘
    class="searchBar-input"
    type="search"
    placeholder="搜索"
  />
  <div class="searchBar-mask"
  ></div>
  </div>`,

但是問題出現了，在手機端測試的時候發現，點擊遮罩或者點擊手機軟鍵盤上的確定都無法使搜索框失焦，遮罩和軟鍵盤都無法消失，只有點擊軟鍵盤上的完成或者“▽”符號（打不出那個符號，大家懂就好/捂臉），遮罩和軟鍵盤才能消失。

那麽如何使搜索框失焦呢？

當然，如果去操作dom，給遮罩層“searchBar-mask”綁定click事件，點擊它的時候，再通過dom操作，使input失焦就解決問題了。

但是，整個項目沒有用到jq,也沒有用到dom操作，也不想因為這麽一個小問題引進jq或者dom操作，只好另辟蹊徑。

查資料啊文檔啊，最後發現了ref屬性還有vue的$emit,ref屬性可以使代碼可以獲取到當前的dom節點，$emit可以是一個發射器，可以向自定義的事件發射信息，就有了一個思路，點擊遮罩的時候，向一個自定義的事件發射信息，在搜索框監聽這個自定義事件，收到信息後用ref屬性獲取當前的dom節點，使其失焦，完成！

最後的代碼：

var searchBarComponent = {
  template:`<div class="searchBar-div">
  <input v-model="keyWord"
    @keyup.enter=‘startSearch()‘
    v-on:search-blur="this.$refs.input.blur();"
    class="searchBar-input"
    type="search"
    placeholder="搜索"
    ref="input"
  />
  <div class="searchBar-mask"
    @click
 
="searchBlur"
  ></div>
  </div>`,
  data:function(){
    return{
      keyWord:‘‘,
    }
  },
  methods: {
    startSearch: function startSearch() {
      this.$refs.input.blur();
      console.log(‘Do Check‘+this.keyWord);
      this.$emit(‘searcher-key-word‘,this.keyWord);
    },
    searchBlur:function(){
      this.$emit(‘search-blur‘);
    }
  }
}var searchBarComponent = {
  template:`<div class="searchBar-div">
  <input v-model="keyWord"
    @keyup.enter=‘startSearch()‘
    v-on:search-blur="this.$refs.input.blur();"
    class="searchBar-input"
    type="search"
    placeholder="搜索"
    ref="input"
  />
  <div class="searchBar-mask"
    @click="searchBlur"
  ></div>
  </div>`,
  data:function(){
    return{
      keyWord:‘‘,
    }
  },
  methods: {
    startSearch: function startSearch() {
      this.$refs.input.blur();
      console.log(‘Do Check‘+this.keyWord);
      this.$emit(‘searcher-key-word‘,this.keyWord);
    },
    searchBlur:function(){
      this.$emit(‘search-blur‘);
    }
  }
}

template:`<div class="searchBar-div"> <input v-model="keyWord" @keyup.enter=‘startSearch()‘ v-on:search-blur="this.$refs.input.blur();" class="searchBar-input" type="search" placeholder="搜索" ref="input" /> <div class="searchBar-mask" @click="searchBlur" ></div> </div>`,

vue怎麽不通過dom操作獲取dom節點