Question

在vue.js app中使用此组件层次结构：

<Root>
  <Table>
    <Row>
    <Row>
    ...
    <Row>

这个问题与Row组件中的根元素有关。起初它是表TR元素。但是现在我不知道Row组件中有多少TR行。模板标签不能是根元素。

如何组织包含许多TR行的行控制器？

<script type="text/template" id="row-template">
<tr>
  <td>{{row.name}}</td>
  <td>{{row.price}}</td>
</tr>
<tr>
  <td>-</td>
  <td>{{row.params[0].name}}</td>
</td>
<tr>
  <td>-</td>
  <td>{{row.params[1].name}}</td>
</td>
</script>

Answer 1

在表格中有多个<tbody>标签实际上是有效的html，因此您可以将其作为每个组件的根元素。

<script type="text/template" id="row-template">
<tbody>
  <tr>
    <td>{{row.name}}</td>
    <td>{{row.price}}</td>
  </tr>
  <tr>
    <td>-</td>
    <td>{{row.params[0].name}}</td>
  </td>
  <tr>
    <td>-</td>
    <td>{{row.params[1].name}}</td>
  </tr>
</tbody>
</script>

Answer 2

除了多个tbody技巧之外，还需要使用带有tbody标记的the is attribute来实例化组件，这样您就不会拥有组件标记不合法的地方。

＆＃13;

new Vue({
  el: "#foo",
  components: {
    componentName: {
      props: ['first'],
      template: '#cn-template'
    }
  }
});

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<template id="cn-template">
    <tbody>
      <tr>
        <td>{{first}}</td>
      </tr>
      <tr>
        <td>two</td>
      </tr>
    </tbody>
</template>
<table id="foo">
  <tbody>
    <tr>
      <td>Parent</td>
    </tr>
  </tbody>
  <tbody is="componentName" first="one">
  </tbody>
</table>

＆＃13;

Answer 3

多个<tbody/>是一个很好的答案，但有时还不够。

对于类似的问题，我打算提出另一个答案： Vue js error: Component template should contain exactly one root element

在此处复制粘贴：

如果出于任何原因，您不想添加包装器（在我的第一种情况下，该包装器用于<tr/>组件），则可以使用功能组件。

components/MyCompo.vue文件夹中只有几个文件，而不是一个components/MyCompo：

components/MyCompo/index.js
components/MyCompo/File.vue
components/MyCompo/Avatar.vue

采用这种结构，您调用组件的方式不会改变。

components/MyCompo/index.js文件内容：

import File from './File';
import Avatar from './Avatar';   

const commonSort=(a,b)=>b-a;

export default {
  functional: true,
  name: 'MyCompo',
  props: [ 'someProp', 'plopProp' ],
  render(createElement, context) {
    return [
        createElement( File, { props: Object.assign({light: true, sort: commonSort},context.props) } ),
        createElement( Avatar, { props: Object.assign({light: false, sort: commonSort},context.props) } )
    ]; 
  }
};

如果两个模板中都使用了某些功能或数据，则将它们作为属性传递就可以了！

我让您想象使用此模式构建组件列表以及如此多的功能。

表行上的Vue.js根元素

3 个答案: