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

Question

我对 Vue 没有太多经验，并且面临重新渲染以根作为 TR 元素的组件的问题。

我在文档https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats中阅读了此内容，并尝试使用is属性添加组件，但这也无济于事。检查下面的代码。

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>

这会出错： 编译模板时出错：内联模板组件必须只有一个子元素。

我怎样才能解决这个问题？感谢帮助。

小提琴https://jsfiddle.net/8d65gvua/

更新----更多发现

如果我将我的 tr 包装在模板中，它就可以工作

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

我不知道为什么。tr 的问题不应该通过使用该is属性来解决吗？为什么我们需要这样做？

标签： javascriptvue.jsvuejs2vue-component

Answer 1

我以前从未使用inline-template过，我的猜测是您正在使用它将数字传递给您的“内部模板”？您可以通过使用插槽来实现相同的目的。（参考）

我做了一个测试，但使用了插槽，我认为这是一种更好的方式来满足传递“内部模板”的需求。还给出了文档中关于inline-template我会选择插槽的以下警告。

但是，inline-template这会使您的模板范围更难推理。作为最佳实践，最好使用文件中的元素 template option或在组件内定义模板。<template>.vue

例子

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

以上是定义单个表格行的组件。该<slot>元素基本上是您想要传递到此模板的任何内容的占位符。

用法

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

这里会发生的是，<td>{{ todo.text}}</td>将被放置而不是组件<slot>中的元素my-row。您可以有多个<td>元素，无论您放入的任何内容都my-row将出现而不是<slot>.

JS 小提琴：https ://jsfiddle.net/x793nub6

PS：老虎机！

我不想回答太长，但请记住，使用插槽，您可以拥有超级可定制的组件，当然这一切都取决于您的需求。但我建议查看文档并尝试一些过期时间。

---

更新 - 如果您仍想使用inline-template

我再次浏览了您分享的 JS Fiddle，并意识到您遇到的问题是什么。基本上vue是说需要传递一个孩子。我想有一些混淆，因为有一个<tr>嵌套在 another 中<tr>。为了修复它，<tr>用一个<template>元素包裹内部。

从：

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

至：

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