Question

阅读文档＆amp;几个小时的论坛......仍然没有答案。

拥有以下JS / HTML：

＆＃13;

Vue.component("my-component", {
    props: ["id"],
    
    render: function(h) {
        return h("tr", this.$slots.default);
    }
});
    
    
var vapp = new Vue();

＆＃13;

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

＆＃13;

使用tr +＆＃34;是＆＃34;用于指定表中组件的属性，否则浏览器将其作为无效内容提升。的完成

使用render + h（＆＃34; tr＆＃34; ...）因为vuejs不会渲染tr元素，而是使用table＆gt; td再次浏览器将其提升。完成

现在我有桌子＆gt; tr> td渲染得很好但是如何添加绑定到道具/数据的子节点，所以我会看到＆＃34;哟＆＃34;在屏幕上。

非常感谢！

Answer 1

如果插槽中的元素需要访问组件中的数据，那么您需要使用scoped slot。

由于您正在使用渲染功能，因此作用域的插槽可以通过this.$scopedSlots.default()作为函数使用，并且您将一个对象传递给您希望可用于作用域插槽的数据。

您还需要在模板中定义范围内的插槽。这是一个例子。

＆＃13;

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"});

＆＃13;

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

＆＃13;

Answer 2

如果您使用.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>

Answer 3

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

vuejs：组件，如何实现？

3 个答案: