Nativescript-vue 打字稿。通过代码将自定义组件添加到布局容器

Question

我正在尝试通过代码添加，这是我自己创建的自定义组件(DinamycTable)。我正在使用带有 Typescript 的 Nativescript-vue 6.0。

我有以下代码：

import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout'; @Component({ components: { DinamycTable, RowTable, CalendarComponent, CirclePhoto }, }) export default class extends BaseVue { $refs!: { calendar: CalendarComponent; stk_container: any; }; private dt: DinamycTable; get stk_container(): StackLayout{ return this.$refs.stk_container.nativeView; }

然后我尝试添加这个组件，它的属性是：

mounted(){ this.dt = new DinamycTable(); this.dt.title = this.L('AdminSmallStatistic.text.1'); this.dt.icon_left = ''; this.dt.isIcon_left = false; this.dt.icon_right= 'fa-angle-down'; this.dt.headers = headers; this.stk_container.addChild(this.dt); }

然后我得到以下错误：

Argument of type 'default' is not assignable to parameter of type 'View'. Type 'default' is missing the following properties from type 'View': android, ios, bindingContext, borderColor, and 171 more

这是我的自定义组件的初始代码 (DinamycTable):

<script lang="ts"> import { screen } from 'tns-core-modules/platform/platform'; import { Component, Prop } from 'vue-property-decorator'; import Vue from 'nativescript-vue'; @Component export default class extends Vue { @Prop({ type: String, default: 'Titulo' }) title!: string; }

我正在尝试重新创建以下内容，但使用 Vue js 创建的自定义组件。

Answer 1

改变方法，您可以渲染多个 Vue dynamic components。

如果您有不同的组件：

<template>
    <StackLayout>
        <component v-for="(child, i) in children"
            :is="child.component" :key="i" v-bind="child.props" />
    </StackLayout>
</template>

<script>
import ComponentA from "~/components/ComponentA";
import ComponentB from "~/components/ComponentB";

export default {
    data() {
        children: []
    },

    mounted() {
        this.children.push({
            props: { title: "Title 1" },
            component: ComponentA
        });
        this.children.push({
            props: { title: "Title 2" },
            component: ComponentB
        });
    }
}
</script>

灵感来自 this

只有一个组件的更简单的场景：

<template>
    <StackLayout>
        <DynamicTable v-for="(props, i) in children" :key="i" v-bind="props" />
    </StackLayout>
</template>

<script>
import DynamicTable from "~/components/DynamicTable";

export default {
    components: {
        DynamicTable
    },

    data() {
        children: []
    },

    mounted() {
        this.children.push({
            title: "Title",
            // other props
        });
    }
}
</script>

Nativescript-vue 打字稿。通过代码将自定义组件添加到布局容器

Nativescript-vue Typescript. Adding custom component to a layout container through code

typescript

nativescript

nativescript-vue