vue中给render函数子组件设置ref
这个问题是我用iview ui 中table嵌套表格出现的,想设置ref调用组件中的方法
我们按照平时的写法,ref是不会生效的,因为render函数是根据传入的标签渲染的,而ref是渲染之后才创建的,所以正常写h
render函数中使用ref是无效的
下面这样写是无效的,是我刚开始的写法,有效的方法继续往下看
{
type: 'expand',
width: 60,
align: 'center',
render: (h, params) => {
return h(expandRow, { // 这样写拿不到ref
ref: 'child1',
props: {
code: params.row,
getshippingmethodsId: this.getshippingmethodsId,
isValue: 'open',
dadArgs: this.sonDadArgs
},
style: { marginLeft: '46px' },
on: {
refresh: this.refresh,
fatherAdd1: this.fatherAdd
}
})
}
},
下面这样写才是有效的
解决办法
把h改为
this.$createElement
{
type: 'expand',
width: 60,
align: 'center',
render: (h, params) => {
return this.$createElement(expandRow, { // 把h换成this.$createElement
ref: 'child1',
props: {
code: params.row,
getshippingmethodsId: this.getshippingmethodsId,
isValue: 'open',
dadArgs: this.sonDadArgs
},
style: { marginLeft: '46px' },
on: {
refresh: this.refresh,
fatherAdd1: this.fatherAdd
}
})
}
},
Vue在创建Vue实例时,通过render作为函数来渲染Dom树,而在render方法中,又调用createElement函数来渲染子组件或元素。因此此时元素或子组件处于渲染过程。ref是用来给元素或子组件注册引用信息的,引用信息将会注册在父组件的$refs对象上。因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们,因为那时候还不存在。