Vuejs2 如何使用child<；模板>；每个指令/组件调用标记以创建动态模板？

我正在尝试将AngularJS指令移植到VueJS，但我无法破解这个特定的螺母

简单地说，我有一个“generic”list指令。在指令的每次调用下都有一个

标记，它定义了

tbody

的呈现方式。在AngularJS中，每次调用

时，我都能通过DOM将

#myDirectiveBaseTemplate

中的

tbody[target='true']

替换为

myDirectiveBaseTemplate

模板的内容来实现这一点（再加上一点

$compile

服务majic，使其成为一个“围棋”）

VueJS似乎不允许我访问此低级功能，或者当它（有点）访问时，它不允许我引用当前的

\u元素

，因此我无法访问每个调用的

标记

简化的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>

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

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

在渲染过程中，

#myDirectiveBaseTemplate

中的

tbody[target='true']

被每个调用的

my directive>模板

替换为DOM，从而基于每个嵌入的

模板

为

my directive

的每次调用创建自定义HTML

所以。。。我到底要怎么在VueJs中做到这一点

编辑1:

第二次调用

my指令

可能如下所示：

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

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

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

{{item.order.delivered？'delivered'：''}
{{item.person.name}
{{item.person.dob}格式：'yyyy-mm-dd'}

---

需要注意的是，上面的例子已经简化了<代码>我的指令实际上可以在其内部定义多达5个不同的

来修改“通用”列表的各个部分（例如

，

等）。然而，所有这些都是为了同样的目的；修改/添加基础指令HTML的DOM的各个部分。

我无法理解当您的

将创建“为

my指令的每次调用创建自定义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>

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

---

您能否添加一个示例，说明如何为每次调用

my directive

自定义/不同

my directive

的主体模板，除了显示不同的项目之外？您似乎在寻找范围slots@StephenThomas也许吧，但我遇到的问题是如何访问manip的

s。大教堂。我倾向于能够在渲染中的给定点访问一个或另一个（主

模板

或

\u元素

s

标记，但不能同时访问这两个标记）：（或者VueJS已移除

标记（在

绑定处）甚至在生命周期的早期，“DOM操纵”还不够清楚，因为Vue.js有许多工具可以将DOM绑定到组件状态。Vue允许您使用以下工具访问DOM本身：但最佳做法是首先寻找更多框架式的方法来实现所需的结果上面的示例已经简化了很多ally有5个不同的
，它们定义了表格/指令的不同部分；标题栏控制左侧和右侧、TBODY、工具提示和帮助（但它们都提供相同的通用、小型部分，集成到较大的列表控件中）。