vue中通過render函數給子組件設置ref

正常我們的寫法是,這樣ref不會生效,h是作用在渲染的時候的,而ref是渲染之後才創建的,因此在h函數中使用ref是無效的。

render: (h, params) => {
				        	
	return h(expandRow, {
	    ref:'child',
	    props: {
	        row: params.row
	    }
				
		})    
}
			

我們常見h函數的用法是:

render: (h) => {
    return h(ele)
}

=> 是es6的用法,相當於 (h) => {}  相當於 function(){},上面的代碼可解析爲:

render: function(createElement) {
    return createElement(ele);
}

Vue在創建Vue實例時,通過render作爲函數來渲染Dom樹,而在render方法中,又調用createElement函數來渲染子組件或元素。因此此時元素或子組件處於渲染過程。ref是用來給元素或子組件註冊引用信息的,引用信息將會註冊在父組件的$refs對象上。因爲 ref 本身是作爲渲染結果被創建的,在初始渲染的時候你不能訪問它們 - 它們還不存在!

解決辦法

把h改爲創建 this.$createElement

render: (h, params) => {
				        	
	return this.$createElement(expandRow, {
	    ref:'child',
	    props: {
	        row: params.row
	    }
				
		})    
}
				

 

發佈了220 篇原創文章 · 獲贊 8 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章