如何在每个指令/组件调用中使用子 <template> 标签来创建动态模板？

Question

我正在尝试将 AngularJS 指令移植到 VueJS，但我无法破解这个特殊的问题...

简单地说，我有一个“通用”列表指令。在指令的每次调用下都有一个<template> 标记，它定义了tbody 的呈现方式。在 AngularJS 中，我能够通过在每次调用 <my-directive> 时将 #myDirectiveBaseTemplate 中的 tbody[target='true'] DOM 替换为 my-directive > template 的内容来实现这一点（加上一点 $compile 服务majic 混合以使其顺利进行-去）。

VueJS 似乎没有让我访问这个低级功能，或者当它（有点）它没有给我对当前_element 的引用所以我无权访问每个调用的<template> 标签。

简化的 AngularJS 指令代码定义如下：

<my-directive data="some.list" mapping="[ 'property', 'property2' ]">
    <template>
        <tbody>
            <tr ng-repeat="item in data">
                <td>{{item.property}}</td>
                <td>{{item.property2}}</td>
            </tr>
        </tbody>
    </template>
</my-directive>

myDirective 首先拉入基础text/ng-template，看起来像这样：

<script type="text/ng-template" id="myDirectiveBaseTemplate">
    <table>
        <thead>
            <tr ng-repeat="prop in mapping" ng-click="doSort(prop)">
                {{prop}}
            </tr>
        </thead>
        <tbody target="true"></tbody>
    </table>
</script>

在渲染期间，#myDirectiveBaseTemplate 中的 tbody[target='true'] 被 DOM 替换为每个调用的 my-directive > template，从而基于每个嵌入的 template 为 my-directeive 的每个调用创建自定义 HTML。

那么...我到底要如何在 VueJs 中完成这个任务？！？

编辑 1：

my-directive 的第二次调用可能如下所示：

<my-directive data="some.list" mapping="[ 'order.delivered', 'person.name', 'person.dob' ]">
    <template>
        <tbody>
            <tr ng-repeat="item in data">
                <td>{{item.order.delivered ? 'Delivered' : ''}}</td>
                <td>{{item.person.name}}</td>
                <td>{{item.person.dob | format:'yyyy-mm-dd'}}</td>
            </tr>
        </tbody>
    </template>
</my-directive>

请注意，上面的示例已经过简化。 my-directive 实际上可以在自己内部定义多达 5 个不同的 <template>s 来修改“通用”列表的各个部分（例如 <template type='row'>、<template type='help'> 等）。然而，所有的目的都是一样的；修改/添加到底层指令 HTML 的 DOM 的各个部分。

Answer 1

我无法理解您的<template> 是否存在这种情况 将为my-directive 的每次调用创建“自定义 HTML”，除了在每个表行显示不同的项目属性。 如果这只是调用之间的区别，那么您的 Vue.js 组件模板可能看起来像：

Vue.js ChildTbodyComponent.vue 模板：

<tbody>
    <tr v-for="item in items" :key="item.id">
        <td>{{item.property}}</td>
        <td>{{item.property2}}</td>
    </tr>
</tbody>

Vue.js ParentTableComponent.vue 模板：

<table>
    <thead>
        <tr v-for="header in headers" :key="header.name" @click="doSort(header)">
            {{header.name}}
        </tr>
    </thead>
    <child-tbody-component :items="arrayOfDataForRows"></child-tbody-component>
</table>