NativeScript Vue：组件没有在几乎相同的页面上注册在一个页面上注册，但在另一个页面上没有

如何解决NativeScript Vue：组件没有在几乎相同的页面上注册在一个页面上注册，但在另一个页面上没有

下午好，

我遇到了一个问题。希望你能帮我解决这个问题。我会试着解释这个场景。

场景

我有一个产品和类别页面。两者都导入跟踪“面包屑”的“家谱”组件（例如：水果 > 软果 > 草莓）。水果和软果是品类，草莓是产品。当前产品/类别在活动时加粗。

在这种情况下，树中的每个项目都是可点击的，如果项目是类别，则可以导航到类别页面，如果是产品，则可以导航到产品页面。

代码

正如我之前提到的，“家谱”组件在两个页面上都被导入。产品页面之前存在，因此之前在那里导入了树。树的导入方式是：

@Component({
    name: 'ProductDetails',components: {
      > familyTree: require('@/components/product-tab/_components/family-tree/family-tree.vue').default,textBlock: require('@/components/product-tab/_components/text-block/text-block.vue').default,youtubeFrame: require('@/components/product-tab/_components/youtube-frame/youtube-frame.vue').default,}
})

在Vue页面中：

<family-tree name="productTree" :current-id="productId" :family-tree="familyTree" :view-type="productViewType" />

这按预期工作。加载组件并显示树中的所有项目。

现在奇怪的是，对于类别页面，我实际上做了同样的事情，但是在那里我收到了未知自定义元素的错误。换句话说，组件“家谱”未被识别。

类别页面中的树导入：

@Component({
    name: 'CategoryDetails',}
})

还有.vue：

<family-tree name="categoryTree" :current-id="categoryId" :family-tree="familyTree" :view-type="categoryViewType" />

我还尝试以编程方式添加组件（带有 ref 的 stackLayout）。奇怪的是，这确实有效。

var ComponentClass = Vue.extend(FamilyTree);
        var instance = new ComponentClass({
            propsData: {
                currentId: this.categoryId,familyTree: this.familyTree,viewType: this.categoryViewType
            }
        });

        instance.$mount(); // pass nothing
        (this.$refs.container as any).appendChild(instance.$el);

我还检查了所有数据，一切都在那里。没有空指针或类似的东西。

现在通过以编程方式添加它已修复，但这不是我想要的。我只是希望能够通过 html 标签调用组件。

我希望这提供了足够的信息来帮助我。

如果您需要更多信息，请告诉我。

谢谢！

完整代码示例：

category-details.vue

<template>
    <Page backgroundColor="#EBEBEB" enableSwipeBackNavigation="true">
        <ActionBar android:flat="true" android:backgroundColor="#b6a500">
            <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$navigateBack" />
        </ActionBar>
        <ScrollView>
            <GridLayout rows="auto,*" columns="*">
                <StackLayout>
                    <StackLayout padding="10" backgroundColor="#FFF">
                        <Label :text="category.name" color="#000" class="h1" backgroundColor="#FFF" />
                        <StackLayout ref="familyTreeContainer">
                        </StackLayout>
                        <!-- TODO 2668 -->
                        <!--<family-tree name="categoryTree" :current-id="categoryId" :family-tree="familyTree" :view-type="categoryViewType" />-->
                        <Image :src="category.headlineImage ? category.headlineImageUrl : noImageUrl" height="500px" width="auto" class="bordered" />
                    </StackLayout>
                    <text-block v-for="textBlock in category.textBlocks" :text-block="textBlock"></text-block>
                    <StackLayout padding="10" marginTop="5" backgroundColor="#FFF" v-if="category.videoId">
                        <Label text="Video" color="#000" class="t-14" backgroundColor="#FFF" />
                        <youtube-frame :video-id="category.video.url"></youtube-frame>
                    </StackLayout>
                    <StackLayout padding="10" marginTop="5" backgroundColor="#FFF">
                        <Label text="Gerelateerde producten" color="#000" class="t-14" backgroundColor="#FFF" />
                        <StackLayout ref="productListContainer">
                        </StackLayout>
                    </StackLayout>
                </StackLayout>
            </GridLayout>
        </ScrollView>
    </Page>
</template>

<script src="./category-details.ts"></script>

<style scoped>
    .bordered {
        border-width: 1px;
        border-color: #000;
    }

    .fontBold{
        font-weight: bold;
    }
</style>

category-details.ts

import AuthBase from '@/shared/auth-base';
import Vue from 'nativescript-vue';
import { Component,Prop } from 'vue-property-decorator';
import CategoryService from '@/services/product/category-service';
import TextBlockService from '@/services/product/text-block-service';
import { Expand,Filter } from 'odata-query';
import { ViewTypes } from '@/shared/enums/viewTypes';
import FamilyTree from '@/components/product-tab/_components/family-tree/family-tree.vue';
import ProductService from '@/services/product/product-service';
import ProductList from '@/components/product-tab/_components/product-list/product-list.vue';

@Component({
    name: 'CategoryDetails',components: {
        //TODO 2668
        /*        familyTree: require('@/components/product-tab/_components/family-tree/family-tree.vue').default,productList: require('@/components/product-tab/_components/product-list/product-list.vue').default,*/
        textBlock: require('@/components/product-tab/_components/text-block/text-block.vue').default,}
})
export default class CategoryDetails extends AuthBase {
    @Prop() readonly categoryId: number;
    @Prop() readonly familyTree: Models.FamilyTreeDto[];

    private readonly categoryService: CategoryService;
    private readonly textBlockService: TextBlockService;
    private readonly productService: ProductService;

    categoryViewType: ViewTypes = ViewTypes.Category;

    category = {} as Models.CategoryDto;

    noImageUrl: string = Vue.prototype.$noImageUrl;

    products: Models.ProductDto[] = [];

    constructor() {
        super();
        this.categoryService = new CategoryService();
        this.textBlockService = new TextBlockService();
        this.productService = new ProductService();
    }

    async mounted() {
        await this.getCategoryAsync();
        await this.getTextBlocksAsync();

        this.createFamilyTree();

        await this.getProductsAsync();
        this.createProductsList();
    }

    createFamilyTree() {
        // TODO 2668
        var ComponentClass = Vue.extend(FamilyTree);
        var instance = new ComponentClass({
            propsData: {
                currentId: this.categoryId,viewType: this.categoryViewType
            }
        });

        instance.$mount(); // pass nothing
        (this.$refs.familyTreeContainer as any).appendChild(instance.$el);
    }

    createProductsList() {
        // TODO 2668
        var ComponentClass = Vue.extend(ProductList);
        var instance = new ComponentClass({
            propsData: {
                items: this.products,}
        });

        instance.$mount(); // pass nothing
        (this.$refs.productListContainer as any).appendChild(instance.$el);
    }

    async getCategoryAsync() {
        const expand: Expand<Models.CategoryDto> = {
            headlineImage: {},video: {}
        };

        this.category = await this.categoryService.getCategoryByIdAsync(this.categoryId,expand);
    }

    async getProductsAsync() {
        const filter: Filter = {
            categoryId: this.categoryId
        };

        const expand: Expand<Models.ProductDto> = {
            headlineImage: {}
        };

        this.products = await this.productService.getProductsAsync(filter,expand,'Name');
    }

    async getTextBlocksAsync() {
        this.category.textBlocks = await this.textBlockService.getTextBlockByProductIdAsync(this.categoryId);
    }
}

编辑

问题不仅在于家谱，还在于其他组件。我有一种感觉，这与类别详细信息页面的初始化方式有关。

NativeScript Vue：组件没有在几乎相同的页面上注册在一个页面上注册，但在另一个页面上没有

如何解决NativeScript Vue：组件没有在几乎相同的页面上注册在一个页面上注册，但在另一个页面上没有

相关推荐