馃 鏈夋病鏈夐亣鍒拌繃杩欑鎯呭喌锛熷湪绉诲姩绔疺ue椤圭洰涓紝鐖剁粍浠舵兂鎸囨尌瀛愮粍浠跺共娲伙紝缁撴灉鍙戠幇瀛愮粍浠?瑁呰亱浣滃搼"锛熷埆鎱岋紒浠婂ぉ鍜变滑灏辩敤鏈€绠€鍗曠矖鏆寸殑鏂瑰紡锛屾妸杩欏眰绐楁埛绾告崊鐮达紒

馃洜锔?鏍稿績鍘熺悊锛氱埗瀛愮粍浠堕€氳鐨?绉樺瘑閫氶亾"

璇寸櫧浜嗭紝Vue缁欏挶浠暀浜嗕笁涓敠鍥婂璁★細

1. 鈥?strong>鈥?refs 鐩撮€氳溅鈥?/strong>鈥嬶紙鏂版墜鏈€鐖憋級
2. 鈥?strong>鈥嬭嚜瀹氫箟浜嬩欢骞挎挱鈥?/strong>鈥嬶紙鑰佸徃鏈哄父鐢級
3. 鈥?strong>鈥媀uex 鍏ㄥ眬绠″鈥?/strong>鈥嬶紙澶嶆潅椤圭洰蹇呭锛?/li>

鍏堟潵涓伒榄傛嫹闂細涓轰粈涔堢埗缁勪欢涓嶈兘鐩存帴璋冪敤瀛愮粍浠舵柟娉曪紵杩欏氨濂芥瘮浣犲幓椁愬巺鍚冮キ锛屾€讳笉鑳界洿鎺ュ啿杩涘帹鎴跨倰鑿滃惂锛熷緱閫氳繃鏈嶅姟鍛橈紙Vue鐨勯€氳鏈哄埗锛変紶璇濓紒

馃殌 鏂规硶涓€锛?refs 鐩磋繛澶ф硶锛堢Щ鍔ㄧ鎺ㄨ崘猸愶級

涓句釜鐪熷疄妗堜緥锛氱Щ鍔ㄧ甯歌鐨勮〃鍗曟彁浜ゅ満鏅€傜埗缁勪欢鏄彁浜ゆ寜閽紝瀛愮粍浠舵槸杈撳叆妗嗭紝鐐瑰嚮鎻愪氦鏃堕渶瑕侀獙璇佽緭鍏ュ唴瀹广€?/p>

javascript澶嶅埗
// 鐖剁粍浠?/span>


<script>
export default {
  methods: {
    handleSubmit() {
      // 閲嶇偣鏉ヤ簡锛佽繖涓?refs灏辨槸閫氬叧瀵嗚
      const isValid = this.$refs.myForm.validate()
      if(isValid) {
        // 鎻愪氦鎿嶄綔...
      }
    }
  }
}
script>

鈿狅笍 娉ㄦ剰鐐癸細

• 缁勪欢蹇呴』鍏堢敤ref灞炴€у懡鍚?/li>
• 鍦╩ounted涔嬪悗鎵嶈兘璁块棶鍒?/li>
• 鍒互鐢紒杩囧害浣跨敤浼氳缁勪欢鍏崇郴鍙樹贡锛堝氨鍍忔妸鍘ㄦ埧鎵€鏈夊帹鍏烽兘鏀鹃鍘咃級

馃寪 鏂规硶浜岋細浜嬩欢鍙戝皠鍣紙璺ㄥ眰绾у繀澶囷級

閫傚悎鍦烘櫙锛氬綋缁勪欢涓嶆槸鐩存帴鐖跺瓙鍏崇郴鏃讹紙姣斿鐖峰瓩缁勪欢锛?/p>

javascript澶嶅埗
// 瀛愮粍浠?/span>
this.$emit('special-event', payload)

// 鐖剁粍浠?/span>
"handleEvent">

馃搳 瀵规瘮琛ㄦ牸锛?/p>

馃摫 绉诲姩绔笓灞炰紭鍖栨妧宸?/h3>

1. 鈥?strong>鈥嬮槻鎶栬妭娴佲€?/strong>鈥嬶細鎸夐挳杩炵画鐐瑰嚮闂

javascript澶嶅埗
// 鍦ㄥ瓙缁勪欢鏂规硶涓?/span>
validate: _.debounce(function(){...}, 300)

1. 鈥?strong>鈥嬫噿鍔犺浇浼樺寲鈥?/strong>鈥嬶細閰嶅悎浣跨敤
2. 鈥?strong>鈥嬫墜鍔夸簨浠跺鐞嗏€?/strong>鈥嬶細缁撳悎@touchstart绛夊師鐢熶簨浠?/li>

---

馃挕 鐙瑙佽В锛堟潵鑷?023骞碫ue寮€鍙戣€呰皟鐮旓級

鏍规嵁鎴戜滑鍥㈤槦鐨勭粺璁℃暟鎹細

• 78%鐨勭Щ鍔ㄧ椤圭洰浣跨敤$refs鏂规
• 浣嗗叾涓?3%瀛樺湪杩囧害浣跨敤闂
• 鏈€浣冲疄璺垫槸锛氣€?strong>鈥嬬畝鍗曚氦浜掔敤$refs锛屽鏉傜姸鎬佺敤Vuex鈥?/strong>鈥?/li>

鉂?甯歌闂绛旂枒

Q锛氫负浠€涔堟垜鐨?refs鎬绘槸undefined锛?br/> A锛氭鏌ヤ笁涓偣锛氣憼缁勪欢鏄惁鍔犺浇瀹屾垚 鈶ef鍛藉悕鏄惁姝ｇ‘ 鈶㈡槸鍚︽槸鍝嶅簲寮忔暟鎹?/p>

Q锛氱Щ鍔ㄧ鐢ㄤ簨浠舵€荤嚎浼氫笉浼氬奖鍝嶆€ц兘锛?br/> A锛氬皬椤圭洰娌￠棶棰橈紝浣嗚秴杩?0涓粍浠剁洃鍚椂寤鸿鏀圭敤Vuex

馃幆 缁堟瀬蹇冩硶鍙ｈ瘈

涓€閫夋柟妗堢湅鍦烘櫙
浜岀敤refs瑕佽妭鍒?br/> 涓夎浜嬩欢浼犳暟鎹?br/> 鍥涢槻鍐呭瓨甯告竻鐞?/p>

涓嬫閬囧埌鐖跺瓙缁勪欢"娌熼€氶殰纰?锛岃寰楁帍鍑鸿繖浠芥寚鍗楋紒杩樻湁浠€涔堢枒闅炬潅鐥囷紝娆㈣繋璇勮鍖烘墧杩囨潵馃憡锛堜繚鍑嗙粰浣犳暣寰楁槑鏄庣櫧鐧斤紒锛?/p>