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

今天寫一個公眾號的項目，寫了一個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');
    }
  }
}

 

  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>`,