vue中this.$refs有值,但無(wú)法獲取ref的值問(wèn)題及解決

更新時(shí)間：2023年01月23日 12:27:39 作者：阿挪吶~

這篇文章主要介紹了vue中this.$refs有值,但無(wú)法獲取ref的值問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

vue報(bào)錯(cuò)Cannot read property ‘addEventListener’ of null"

在這里插入圖片描述

解決方法

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

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

筆者是后端開(kāi)發(fā)，因?yàn)楣ぷ餍枰_(kāi)始接觸前端的一些東西，邊學(xué)習(xí)邊總結(jié)，如有描述錯(cuò)誤的地方還請(qǐng)大家多多指教。

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

下面用幾個(gè)例子具體看下。

           <a-col :span="6">
			   <a-form-item label="測(cè)試控件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="測(cè)試控件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è)試控件C" >
					<a-input type="text" ref="refTest2" v-decorator="['C']"/>
				</a-form-item>
          </a-col>

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

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

下面開(kāi)始編輯函數(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，無(wú)限制"
			}
		}

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

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

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

對(duì)于文章開(kāi)頭我理解的ref是將子元素注冊(cè)到父元素的說(shuō)法也在這里有驗(yàn)證，在操作為控件C賦值時(shí)，控制臺(tái)會(huì)有錯(cuò)誤提醒：

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"

大體意思是：避免直接改變屬性值，因?yàn)槊慨?dāng)父組件重新渲染時(shí)，該值將被覆蓋。

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