vue中render函数用法,vue组件传值
本文主要介绍了如何通过vue中的render函数为子组件设置ref操作，具有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。
我们正常的写法是，这样的话，ref不会生效。渲染时使用h，渲染后创建ref，在h函数中使用ref无效。
render: (h，params)={
return h(expandRow，{
参考：“孩子”，
道具：{
row: params.row
}
})
}
我们常见的H函数的用法是：
render: (h)={
返回h(ele)
}
=是es6的用法，相当于(h)={}相当于函数(){}。上面的代码可以解析为：
render:function(createElement){
返回createElement(ele)；
}
e .创建Vue实例时，使用render作为函数渲染Dom树，在render方法中调用createElement函数渲染子组件或元素。
因此，元素或子组件正在呈现过程中。
Ref用于注册元素或子组件的引用信息，引用信息将注册在父组件的$refs对象上。
因为ref本身是作为渲染的结果而创建的，所以在最初的渲染过程中无法访问它们——它们还不存在！
解决办法
改变h来创建这个。$createElement
render: (h，params)={
归还这个。$createElement(expandRow，{
参考：“孩子”，
道具：{
row: params.row
}
})
}
补充知识：Vue 里怎样在 Render 中使用 $refs
背景：
使用element-ui组件，发现el-popover组件有一个方法：doc lose()；方法是：this.refs [name]。doclose()；经过测试，正常使用没问题。现在想在组件中的render函数中调用它，却无法得到this.refs [name ]。doclose()一直；经过测试，正常使用没问题。
现在想在组件中的render函数中调用它，却无法得到this.refs [name ]。doclose()一直；经过测试，正常使用没问题。现在想在组件中的render函数中调用，但是一直拿不到this.refs[name]，报错为未定义。
解决思路：
添加vue-DevTools工具，检查$refs属性下是否存在该元素，分析Dom元素的位置，并逐层分解。
在当前渲染下打印这个，发现没有当前元素的相关属性。所以：这指向没问题，但不是我们的Dom元素。
理解Vue.component和render创建的组件的关系和指向问题，render相当于在当前父组件内创建子组件。
解决方法：这个。$refs[父组件引用名称]。refs[子组件引用名称]方法属性
代码结构：
//父组件表列表中的属性
模板
电子贺卡class=auto-schedu-class
table list border ref= table list :columns= columns(this)/
/电子名片
/模板
脚本
const columns=that=[
{
render: (h，parmas)={
返回h(
el-popover，
{
裁判：“波波”，
道具：{
位置：“顶部”，
宽度：“160”
}
},
[
H(p ，当前规则有效。您确定要删除它吗？),
[
h(
el按钮，
{
道具：{
类型：“文本”，
尺寸：“迷你”
},
开：{
点击：row={
console.log(this，-)；
that . handledeleterow(row)；
}
}
},
取消
),
h(
el按钮，
{
道具：{
类型：“文本”，
尺寸：“迷你”
}
},
好的
)
],
h(
el按钮，
{
道具：{
类型：“文本”，
尺寸：“迷你”
},
插槽：“引用”
},
删除
)
]
);
}
}
];
导出默认值{
data() {
返回{
列
};
},
方法：{
handleDeleteRow(row) {
console.log(this，=======)；
这个。$ refs . table list . $ refs . popover . doc lose()；//获取子组件中的属性方法。
}
}
};
/脚本
vue-DevTools元素层级分析总结：
笔者也看了很多类似的文章，但是没能找到合理的解决方法，也没能对文章进行分析。
通过我们的vue工具，一层一层的拆解元素，证明我们的refs元素是存在的。SO: DOM的一种解析加载方法和层次关系是我们的一个想法。很多文章都归结于这个方向，render和vue.component的创建关系就是我们的切入点。
以上通过vue中的render函数对子组件的设置ref操作就是边肖分享的全部内容。希望能给大家一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。