极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<table class="demo">
<tr is="my-tr" v-for="trItem in trItems">
<td is="my-td" v-for="tdItem in trItem.tdItems">
{{ tdItem.number }}
</td>
</tr>
</table>
<script>
var aTr = {
template: '<tr></tr>'
},
aTd = {
template: '<td></td>'
};
var demo = new Vue({
el: '.demo',
data: {
trItems: [
{
tdItems: [{ number: 1 },{ number: 2 },{ number: 3 }]
},
{
tdItems: [{ number: 4 },{ number: 5 },{ number: 6 }]
},
{
tdItems: [{ number: 7 },{ number: 8 },{ number: 9 }]
}
]
},
components: {
'my-tr': aTr,
'my-td': aTd
}
});
</script>
</body>
</html>可是td没出来
诸位前辈帮看看是哪里错了
首先，两个组件中要加 slot 插槽才能实现内容分发！
其次，tr 里加 slot 的时候，由于 HTML 对 tr 内可插入元素的限制，里面的 slot 会被移走。
因此，首先把 aTd 的模板改为
<td><slot></slot></td>，然后再把<tr is="my-tr" v-for="trItem in trItems">中的is="my-tr"去掉就可以了。以上是 Vue.js 1.0 的情况。
由于 Vue.js 2.0 中使用 Virtual DOM 通过 render 函数处理模板，因此不受 HTML 对 tr 内可插入元素的限制影响，只要在两个模板都加上 slot 就可以了。