项目中有部分代码,写层render的形式比template会更好...
但是遇到了一个问题,我们都知道v-for的时候是必须要设置key的,当我用render去遍历一个数组的时候,key怎么设置呢?我将key放在单个组件的props或是domProps都不起作用。一下是render代码:
这里Goup和Cell都是vue对象...也就是components
render(h): any {
const mapNode = (h): any =>{
const conArray = [];
let hVnode = ( vNodeName, part ): any =>{
return h(vNodeName, {
props: {
part: part,
key: part.partId
},
domProps: {
key: part.partId
},
});
}
for(let item of this.partList) {
if(item.partType === 'group') {
conArray.push( hVnode(Group, item) );
} else {
conArray.push( hVnode(Cell, item) );
}
}
return conArray;
}
return h( 'div', {
attrs: {
class: 'group-list',
id: "group-list"
}
},
mapNode(h)
);
},
可行的方案是template,一下是代码
<template>
<div class='group-list' id="group-list">
<div v-for="item of partList" :key="item.partId">
<template v-if="item.partType === 'group'">
<Group :part="item"></Group>
</template>
<template v-else-if="item.partType === ''">
<Cell :part="item"></Cell>
</template>
</div>
</div>
</template>
以上render的形式key值不起作用,表现在删除数组的时候,一定会删除最后一个(即使我删除的是第一个数组对象)...
教个小诀窍,如果对
render
不是很熟,可以先写好template
,然后借助Vue.compile
来生成render
这样控制台会打印出来生成好的
render
函数,不明白可以参见内部细节