当我尝试往tr里使用插槽slot插入td时候 这部分无法渲染。
imstone opened this issue · 7 comments
imstone commented
我的td写在另一个 组件内
比如
有一个table组件叫my-table
这个组件有默认插槽slot如下代码。
<thead>
<tr>
<slot></slot>
</tr>
</thead>
当我写
<my-table>
<my-td></my-td>
</my-table>
整个table 无法渲染
去掉插槽正确
当我吧上面的slot放到td里 可以正常工作
如下
<thead>
<tr>
<td>
<slot></slot>
</td>
</tr>
</thead>
补充一下,在webpack里ok
ccqgithub commented
vue版本号是多少, 配置runtimeOnly 为true还是false ?
还有,能贴一下具体报错信息么
imstone commented
OTS parsing error: invalid version tag
backend.js:1 [vue-devtools] Ready. Detected Vue v2.1.4
没有错误信息 貌似 直接忽略了,应该是不允许往tr里增加除了td之外其他的元素,但是webpack的loader可以
如果runtimeOnly 为true
则 下面
Cannot use as component root element because it may contain multiple nodes:
<slot></slot><table class="h2w-table" :class="h2wClasses">
<thead>
<tr>
</tr>
</thead>
<tbody class="">
<tr class="" v-for="item in data">
<td v-for="td in item">{{td}}</td>
</tr>
</tbody>
</table>
[ERROR] parser.vue-component: Vue template compilation failed [/Users/ruixing/work/gerrit/yjs5-fe/src/h2w/packages/table/table.vue]
imstone commented
我在插件的86行
if (type == 'template') {
console.log(node.content)
content = parse5.serialize(node.content);
console.log(content)
写了 输出
输出如下,发现吧slot挪到了外面
{ nodeName: '#document-fragment',
quirksMode: false,
childNodes:
[ { nodeName: '#text',
value: '\n',
parentNode: [Circular],
__location: [Object] },
{ nodeName: 'slot',
tagName: 'slot',
attrs: [],
namespaceURI: 'http://www.w3.org/1999/xhtml',
childNodes: [],
parentNode: [Circular],
__location: [Object] },
{ nodeName: 'table',
tagName: 'table',
attrs: [Object],
namespaceURI: 'http://www.w3.org/1999/xhtml',
childNodes: [Object],
parentNode: [Circular],
__location: [Object] },
{ nodeName: '#text',
value: '\n',
parentNode: [Circular],
__location: [Object] } ],
__location: null }
<slot></slot><table class="h2w-table" :class="h2wClasses">
<thead>
<tr>
</tr>
</thead>
<tbody class="">
<tr class="" v-for="item in data">
<td v-for="td in item">{{td}}</td>
</tr>
</tbody>
</table>
ccqgithub commented
知道问题出在哪了,会尽快修复。。
imstone commented
多谢!如果可以的还请尽快提交一下,正在赶需求列!
=。=
ccqgithub commented
已修复:v5.1.0
imstone commented
好用!赞!已star