vue中this.$refs有值，但無法獲取ref的值

vue報錯Cannot read property ‘addEventListener’ of null"

解決方法

查看當(dāng)前div或者父級div是否存在v-if，如果存在，請改為 v-show

ant-design-vue中this.$refs使用筆記

筆者是后端開發(fā)，因為工作需要開始接觸前端的一些東西，邊學(xué)習(xí)邊總結(jié)，如有描述錯誤的地方還請大家多多指教。

關(guān)于 ref 的用法，個人理解它像是簡潔版的通過id獲取控件元素的工具，其本意就是將擁有該屬性的控件注冊到父元素上進行統(tǒng)一管理。

下面用幾個例子具體看下。

           <a-col :span="6">
			   <a-form-item label="測試控件A">
				   <DicSelect allowClear dicType="GROUP_ROLE_TYPE" v-decorator="['A']"  @select="selectDemo" />
			   </a-form-item>
		   </a-col>
			<a-col :span="6">
            	<a-form-item label="測試控件B" >
	                <DicSelect dicType="GROUP_ROLE_TYPE" ref="refTest1" :allowClear="true" v-decorator="['B']"/>
                </a-form-item>
			</a-col>
			<a-col :span="6">
            	<a-form-item label="測試控件C" >
					<a-input type="text" ref="refTest2" v-decorator="['C']"/>
				</a-form-item>
          </a-col>

首先做了三個控件，其中兩個是雙擊下拉A和B，key-value碼值為：[{"01":"組長"},{"02":"副組長"},{"03":"組員"}]。

最后一個是文本框C。然后我們再B和C上分別加上了ref屬性，分別標記為refTest1和refTest2，在A控件上增加選定觸發(fā)的函數(shù)selectDemo。

下面開始編輯函數(shù)內(nèi)容：

selectDemo (value) {
			if (value === '01') {
				this.$refs.refTest1.disabledItem(['02', '03'])
				this.$refs.refTest2.value = "已選擇01，02、03失效"
			} else if (value === '02') {
				this.$refs.refTest1.disabledItem(['01', '03'])
				this.$refs.refTest2.value = "已選擇02，01、03失效"
			} else if (value === '03') {
				this.$refs.refTest1.disabledItem(['01', '02'])
				this.$refs.refTest2.value = "已選擇03，01、02失效"
			} else {
				this.$refs.refTest1.disabledItem([])
				this.$refs.refTest2.value = "已選擇04，無限制"
			}
		}

函數(shù)內(nèi)容很簡單，根據(jù)A控件選擇內(nèi)容，控制B控件可選內(nèi)容，并且在C控件上展示具體提示，接下來我們看具體效果。

當(dāng)我們選定控件A為組長時，根據(jù)上述jS邏輯會將控件B的02、03碼值置為失效不可用，僅讓選擇01，并且在控件C展示文本說明。實際效果和我們預(yù)想一致。

關(guān)于利用ref賦值早有很多前輩進行介紹，筆者主要說一下  this.$refs.refTest1.disabledItem(['02', '03'])  的用法，工作中還是經(jīng)常見到這樣的場景，只不過我們都用了別的方式去實現(xiàn)，要么隱藏，要么替換碼值類型等等，個人認為這樣的用法更貼近用戶，操作起來更容易理解其業(yè)務(wù)背景。

對于文章開頭我理解的ref是將子元素注冊到父元素的說法也在這里有驗證，在操作為控件C賦值時，控制臺會有錯誤提醒：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

大體意思是：避免直接改變屬性值，因為每當(dāng)父組件重新渲染時，該值將被覆蓋。

也就是說直接賦值可能會導(dǎo)致屬性值被覆蓋的問題，很可能釀造一樁新的 “ Web懸案 ” ，大家在具體使用的時候要多多留意。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論