vuejs：<tr>组件，如何实现？
vuejs：<tr>组件，如何实现？
提问于 2017-09-05 21:45:55
在阅读了几个小时的文档和论坛之后...仍然没有答案。
具有以下JS/HTML：
Vue.component("my-component", {
props: ["id"],
render: function(h) {
return h("tr", this.$slots.default);
}
});
var vapp = new Vue();<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<table>
<tr is="my-component" :name="yo">
<td>
<span v-text="name"></span>
</td>
</tr>
</table>
使用tr + "is“属性指定表中的组件，否则浏览器会将其作为无效内容列出。Done
使用render + h("tr"...)因为vuejs不会呈现tr元素，而是table > td，然后再次用浏览器将其提出来。完成了
现在我已经很好地呈现了table > tr > td，但是我如何添加绑定到props/data的孩子，所以我将在屏幕上看到"yo“。
非常感谢!
回答 4
Stack Overflow用户
发布于 2017-09-05 22:33:18
如果插槽中的元素需要访问组件内部的数据，则需要使用scoped slot。
由于您使用的是呈现函数，因此作用域插槽可以通过this.$scopedSlots.default()作为函数使用，您可以向它传递一个对象，其中包含您希望对作用域插槽可用的数据。
您还需要在模板中定义作用域插槽。下面是一个例子。
Vue.component("my-component", {
props: ["id", "name"],
render: function(h) {
return h("tr", this.$scopedSlots.default({name: this.name}));
}
});
var vapp = new Vue({ el:"#app"});<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<div id="app">
<table>
<tr is="my-component" :name="'yo'">
<template scope="{name}">
<td>
<span v-text="name"></span>
</td>
</template>
</tr>
</table>
</div>
Stack Overflow用户
发布于 2017-09-05 22:50:48
如果您使用的是.vue文件，则可以按如下方式定义表行组件：
<template>
<tr>{{ name }}</tr>
</template>
<script>
export default {
name: 'table-row',
props: ['name'],
};
</script>然后像这样使用它：
<table>
<tr is="TableRow" name="Some name here"></tr>
</table>Stack Overflow用户
发布于 2018-08-05 04:58:47
<table>
<thead>
<!-- ...some th -->
</thead>
<tbody>
<tr>
<td>..</rd>
</tr>
<template> <row-component my-param="blabla"></row-component> <!-- component return full row <tr>...</tr> -->
<some-other-recomponent my-par="blabla"></some-other-recomponent> <!-- component return full row <tr>...</tr> -->
</template>
</tbody>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46056595
复制相关文章
相似问题