Question

我正在学习nativescript-vue，并尝试使用单个文件组件来使代码更整洁。我从这个简单的示例开始，该示例在我的模拟器中呈现得很好：

<template>
    <Page>
        <ActionBar title="Welcome to Yellow Bucket!" android:flat="true"/>
        <TabView android:tabBackgroundColor="#53ba82"
                 android:tabTextColor="#c4ffdf"
                 android:selectedTabTextColor="#ffffff"
                 androidSelectedTabHighlightColor="#ffffff">
            <TabViewItem title="Movies">
                <GridLayout columns="*" rows="*">
                    <Label class="message" :text="msg" col="0" row="0"/>
                </GridLayout>
            </TabViewItem>
            <TabViewItem title="Customers">
                <ListView for="customer in customers" @itemTap="onItemTap" class="list-group" style="height:1250px">
                    <v-template>
                        <FlexboxLayout flexDirection="row" class="list-group-item">
                            <Label :text="customer.name" class="list-group-item-heading label-text" style="width: 100%"/>
                        </FlexboxLayout>
                    </v-template>
                </ListView>
            </TabViewItem>
            <TabViewItem title="About">
                <GridLayout columns="*" rows="*">
                    <Label class="message" text="About Yellow Bucket" col="0" row="0"/>
                </GridLayout>
            </TabViewItem>
        </TabView>
    </Page>
</template>

<script>
    import axios from "axios";

    function Customer({id, name, email, isAdmin}) {
        this.id = parseInt(id);
        this.name = name;
        this.email = email;
        this.isAdmin = isAdmin
    }

    export default {
        data() {
            return {
                msg: 'Hello World!',
                customers: []
            }
        },
        methods: {
            onItemTap: function (args) {
                console.log("Item with index: " + args.index + " tapped");
            }
        },
        mounted() {
            axios.get("https://example.com/api/customers").then(result => {
                result.data.forEach(customer => {
                    this.customers.push(new Customer(customer));
                })
            }, error => {
                console.error(error);
            })
        }
    }
</script>

<style scoped>

    .label-text {
        color: #444444;
    }
</style>

我想要做的是获取ListView并将其作为一个单独的组件称为。我正在努力了解如何执行此操作。在我的Vue网络代码中，我有一个看起来像这样的组件：

<customer-component
                    v-for="(customer, index) in customers"
                    v-bind="customer"
                    :index="index"
                    :key="customer.id"
                    @view="view"
                    @rentals="rentals"
            ></customer-component>

然后，在CustomerComponent中，我有HTML可以正确呈现每个客户并添加一些调用其他路线的按钮，等等。

我想我的问题是...在nativescript-vue中，似乎ListView正在执行循环，并且正在处理布局。这如何转化为使用单独的组件来呈现客户列表？

Answer 1

创建模板：

<template>
  <ListView for="item in items">
    <StackLayout orientation="vertical">
      <Label class="title" :text="item.title"/>
      <Label class="message" :text="item.message"/>
      <Button @tap="itemButtonTapped(item)" class="btn" :text="item.buttonName"/>
    </StackLayout>
  </StackLayout>
</template>

在组件中添加道具，您可以创建任何喜欢的东西，例如想要回调，因此可以创建一个名为callback的道具并将其作为函数。

props: {
  items: Array,
  callback: Function
},

假设我们将这个组件称为CustomList.vue

现在在其他文件中，您可以导入组件

import CustomList from "./CustomList.vue"

通过“组件”字段将组件添加到您的vue文件。

components: { CustomList }

现在，您可以像下面这样在模板中使用它：

<custom-list :items="myItems"></custom-list>

希望这会有所帮助，

门诺

从nativescript-vue中的ListView创建组件

1 个答案: