render 函数基础
在 Vue 开发中,render 函数提供了比模板更底层的控制能力。它接收一个 h 函数作为参数,用于创建虚拟 DOM 节点。相比模板语法,render 函数更适合处理动态组件或需要复杂逻辑渲染的场景。
基本结构
render 函数的核心在于 h 方法的调用。通常形式如下:
render(h) {
return h(
'div', // 标签名或组件引用
{ /* 属性配置对象 */ },
['子元素内容'] // 文本或子节点数组
)
}
参数详解
- 第一个参数(标签/组件):可以是字符串标签名(如
'div'),也可以是引入的组件名(如mySwiper)。 - 第二个参数(属性对象):对应模板中的指令和属性。支持以下常用配置:
class/style:等同于v-bind:class和v-bind:style。attrs:标签的基本 HTML 属性,如id、src。domProps:DOM 原生属性,例如innerHTML。props:传递给组件的 props。on/nativeOn:事件监听器。注意nativeOn主要用于 Vue 2 的原生事件绑定。
- 第三个参数(子元素):可以是字符串文本,也可以是包含其他 VNode 的数组。
实战示例
下面是一个完整的 render 函数片段,展示了如何组合这些属性:
render: function(h) {
return h(mySwiper, {
class: ['swiper-container'],
style: { height: '100%' },
attrs: {
id: 'my-swiper',
src: '/images/bg.jpg'
},
domProps: {
innerHTML:
},
: {
:
},
: {
: .(val)
},
: {
: {}
}
})
}

