在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,props: { row: params.row } }) }
補充知識:Vue 裡怎樣在 Render 中使用 $refs
背景:
使用 element-ui 元件,發現el-popover元件有一個方法: doClose();呼叫方法為:this.refs[name].doClose();經過測試正常使用是沒問題的。現在想要在元件內的render函式中呼叫,一直獲取不到this.refs[name].doClose();經過測試正常使用是沒問題的。
現在想要在元件內的render函式中呼叫,一直獲取不到this.refs[name].doClose();經過測試正常使用是沒問題的。現在想要在元件內的render函式中呼叫,一直獲取不到this.refs[name],報undefined
解決思路:
新增vue-DevTools工具,檢視$refs屬性下是否存在該元素,分析Dom元素存在的位置,進行逐層分解
列印當前render下的this,發現並沒有當前元素的相關屬性,so: this指向沒有問題,但並非是我們的Dom元素
理解Vue.component和render所建立的元件的關係和指向問題,render相當於是在當前的父元件內建立了子元件
解決方式:this.$refs[父元件ref名].refs[子元件ref名]+方法屬性
程式碼結構:
// 父元件TableList內的屬性 <template> <el-card class="auto-schedu-class"> <TableList border ref="TableList" :columns="columns(this)" /> </el-card> </template> <script> const columns = that => [ { render: (h,parmas) => { return h( "el-popover",{ ref: "popover",props: { placement: "top",width: "160" } },[ h("p","當前規則生效中,是否確認刪除?"),[ h( "el-button",{ props: { type: "text",size: "mini" },on: { click: row => { console.log(this,"-------------"); that.handleDeleteRow(row); } } },"取消" ),h( "el-button",size: "mini" } },"確定" ) ],h( "el-button",{ props: { type: "text",size: "mini" },slot: "reference" },"刪除" ) ] ); } } ]; export default { data() { return { columns }; },methods: { handleDeleteRow(row) { console.log(this,"======="); this.$refs.TableList.$refs.popover.doClose(); // 獲取到子元件內的屬性方法 } } }; </script>
vue-DevTools元素層級分析總結:
作者也看了好多類似的文章,並沒有找到一個合理的解決方式和解析文章
通過我們的vue工具,逐層進行元素的拆解,證明我們的refs元素是存在的,so:Dom的一種解析載入方式和層級關係就是我們的一個思路點,很多文章歸結在this的指向上面,而render的建立和vue.component的關係才是我們的突破點
以上這篇在vue中通過render函式給子元件設定ref操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。