ccqgithub/fis3-parser-vue-component

当我尝试往tr里使用插槽slot插入td时候 这部分无法渲染。

imstone opened this issue · 7 comments

我的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

vue版本号是多少, 配置runtimeOnly 为true还是false ?
还有,能贴一下具体报错信息么

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]

我在插件的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>

知道问题出在哪了,会尽快修复。。

多谢!如果可以的还请尽快提交一下,正在赶需求列!
=。=

已修复:v5.1.0

好用!赞!已star