如何渲染一个以 TR 为根元素的 vue 组件？

Question

I don't have much experience with Vue and facing an issue with redering a component with root as TR element.

I read this in the docs https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats and tried adding the component using is property, but that didn't help either. Check the code below.

Vue.component('car',{
  props: ['number']
})

new Vue({
  el: "#app"
})

<div id="app">
  <table>
    <tr is='car' inline-template number='123'>
      <tr>
         <td>car no</td>
         <td>{{number}}</td>
      </tr>
    </tr>
    
    <tr is='car' inline-template number='456'>
      <tr>
         <td>car no</td>
         <td>{{number}}</td>
      </tr>
    </tr>
    
  </table>
</div>

This errors out: Error compiling template: Inline-template components must have exactly one child element.

How can I fix this? Appreciate the help.

Fiddle https://jsfiddle.net/8d65gvua/

Update ---- More findings

If i wrap my tr in a template it works

<tr is='car' inline-template number='456'>
  <template>
  <tr>
    <td>car no</td>
    <td>{{number}}</td>
  </tr>
  <template>
</tr>

I have no clue why. Shouldn't the issue with tr be fixed with using the is property? Why do we need to do this?

Answer 1

I've never used inline-template before, my guess is that you are using it to pass the number to your "inner template"? You can achieve the same thing by using slots. ( Reference )

I did a test but using slots instead, which I think it's a better way to cater for passing "inner templates". Also given the below warning in the documentation with regards to inline-template I would opt for slots.

However, inline-template makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the template option or in a <template> element in a .vue file.

Example

Vue.component('my-row', {
    template: `
        <tr>
          <slot></slot>
        </tr>
    `
})

The above is a component to define a single table row. The <slot> element is basically a placeholder for any content you want to pass into this template.

Usage

<div id="app">
  <table>
    <tr
      is="my-row"
      v-for="todo in todos"
    >
      <td>{{ todo.text }}</td>
    </tr>
  </table>
</div>

What will happen here is that <td>{{ todo.text}}</td> will be placed instead of the <slot> element in the my-row component. You can have multiple <td> elements, whatever content you put in the my-row will appear instead of <slot> .

JS Fiddle: https://jsfiddle.net/x793nub6

PS: Slots!

I don't want to make the answer too long, but keep in mind that with slots you can have a super customisable components, of course this all depends on your needs. But I would suggest having a look at the documentation and trying out a few expirements.

---

Update - If you still want to use inline-template

I went through the JS Fiddle you shared once more and realised what's the issue you are having. Basically vue is saying that one child needs to be passed. I guess there's some mixup since there's a <tr> nested in another <tr> . To fix it wrap the inner <tr> with a <template> element.

From:

<tr is='car' inline-template number='123'>
  <tr>
    <td>car no</td>
    <td>{{number}}</td>
  </tr>
</tr>

To:

<tr is='car' inline-template number='456'
  <template>
    <tr>
      <td>car no</td>
      <td>{{number}}</td>
    </tr>
  </template>
</tr>