Question

我有一个<overview>组件，将所有联系人都放在道具中。

在概述中，我会相应地遍历联系人并显示表行。

但是，在每个表格行中，我想使用专用的<contact>组件来表示特定方法。

我想使用这种嵌套功能，因为我对不同的数据列表使用了相同的<overview>组件。在每个表格行中，我会使用<contact>或<project>组件。例如。这样，我可以组织特定的组件方法等。

但我似乎找不到办法让这项工作。

https://jsfiddle.net/vbu8x8ko/

修改：我会更好地创建不同的概述组件，例如<overview-contacts>，然后将mixins用于任何共享概览功能吗？

如果我这样做，我就不会为每个表格行都有一个嵌套组件。

虽然我仍然想知道如何让嵌套的内联模板起作用。

有什么想法吗？

Answer 1

我认为问题可能发生在@NgModule({ imports: [CommonModule, FormsModule, NgbModule], declarations: [ FooComponent ], providers: [FooService], exports: [ CommonModule, FormsModule, FooComponent, NgbModule ] }) export class SharedModule {}模式下。虽然它允许更灵活的模板创作，但inline-template使您的模板范围更难以推理。我建议您可以通过模板字符串而不是inline-template将概述和联系人组件的内部内容放入其模板中，如下所示：

＆＃13;

inline-template

＆＃13;

Vue.config.debug = true;
Vue.config.devtools = true;
Vue.component('overview', {
  	props: [ 'contacts', 'columns' ],
    template: `<table>
            <thead>
                <tr>
                    <template v-for="column in columns">
                        <th>{{ column }}</th>
                    </template>
                </tr>
            </thead>
            <tbody>
                <tr v-for="value in contacts">
                    <contact :contact="value" :columns="columns"></contact>
                </tr>
            </tbody>
        </table>`
});


Vue.component('contact', {
    props: [ 'contact', 'columns' ],
		template: `<div><td v-for="column in columns">{{ valueForColumn(column) }}</td></div>`,
    methods: {

        valueForColumn(column)
        {
        debugger
            if (column == 'name')
            {
              	return this.contact.firstName +' '+ this.contact.lastName;
            }
        }
    }
});


new Vue({
  	el: '#app'
});

＆＃13;

如何嵌套内联模板组件？

1 个答案: