Vue.js 如何在ListView中使用动态组件

我正在尝试使用包含其类型事先未知的组件的模板填充NativeScript Vue ListView。例如，由于NativeScript没有“component”元素，因此此代码不起作用，但这表明我正在尝试完成以下任务：

<ListView for="component in components">
    <v-template>
        <component :is="component" />
    </v-template>
</ListView>

computed: {
    components () {
        return ['Label', 'Button'];
    }
}

计算：{
组件（）{
返回[‘标签’、‘按钮’]；
}
}

---

是的，我知道您可以在v模板中使用if=“”，但在这种情况下，我不知道需要在ListView中提前加载哪些组件。在我的例子中，我在插件中加载全局组件，这些组件将在ListView中引用。

您的模板不能是动态的，这就是使用ListView的全部目的-保持它们静态，以便可以根据需要重用它们。如果希望根据数据查看不同的组件，则必须使用多个模板

---

谢谢@Manoj。这些睿智的话语让我想到，模板不能是动态的，但v模板的内容可以是动态的。也许不是每个人都适用，但这段代码对我很有用：

// App.vue

<template>
    <Page>
        <ActionBar title="Welcome to NativeScript-Vue!"/>
        <GridLayout columns="*" rows="400,*">
            <ListView ref="lv" for="item in items">
              <v-template>
                <v-component :type="item.type" :options="item.options" />
              </v-template>
            </ListView>
        </GridLayout>
    </Page>
</template>

<script lang="ts">
  import Vue from 'nativescript-vue'
  import { Component } from 'vue-property-decorator'
  import VComponent from './VComponent.vue'

  @Component({
    components: {
      VComponent
    }
  })
  export default class App extends Vue {
      get items () {
      return [
        {type: 'Label', options: [{key: 'text', value: 'I am a Label'}, {key: 'color', value:'red'}] },
        {type: 'Button', options: [{key: 'text', value:'I am a Button!'}]}
      ]
    }
  }
</script>


// VComponent.vue

<template>
  <StackLayout ref="myLayout">
  </StackLayout>
</template>

<script lang="ts">
  import Vue from 'nativescript-vue'
  import { Component, Prop } from 'vue-property-decorator'
  import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout'
  import { Label } from 'tns-core-modules/ui/label'
  import { Button } from 'tns-core-modules/ui/button'

  const classByClassName = {
    'Label': Label,
    'Button': Button
  }

  @Component
  export default class CoolTemplate extends Vue {
    @Prop() type!: string;
    @Prop() options;

    mounted () {
      if (this.type) {
        const myLayout = <StackLayout>((<Vue>this.$refs.myLayout).nativeView)
        const component = new classByClassName[this.type]
        for (var i = 0; i< this.options.length; i++) {
          const option = this.options[i];
          component[option.key] = option.value 
        }
        myLayout.addChild(component)
      }
    }

  } 
</script>

//App.vue
从“nativescript Vue”导入Vue
从“vue属性装饰器”导入{Component}
从“/VComponent.vue”导入VComponent
@组成部分({
组成部分：{
V组件
}
})
导出默认类应用程序扩展Vue{
获取项目（）{
返回[
{type:'Label'，options:[{key:'text'，value:'I am a Label'}，{key:'color'，value:'red'}]}，
{type:'Button'，options:[{key:'text'，value:'I am a Button！'}]}
]
}
}
//VComponent.vue
从“nativescript Vue”导入Vue
从“vue属性装饰器”导入{Component，Prop}
从“tns核心模块/ui/layouts/stack layout”导入{StackLayout}
从“tns核心模块/ui/Label”导入{Label}
从“tns核心模块/ui/Button”导入{Button}
常量classByClassName={
“标签”：标签，
“按钮”：按钮
}
@组成部分
导出默认类CoolTemplate扩展Vue{
@Prop（）类型！：字符串；
@Prop（）选项；
挂载（）{
if（this.type）{
常量myLayout=（（this.$refs.myLayout）.nativeView）
const component=new classByClassName[this.type]
对于（var i=0；i