正常我們的寫法是,這樣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
}
})
}