在 nativescript-vue 中从 ListView 创建组件

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">
    <v-template>
      <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>
    </v-template>
  </ListView>
</template>

将 props 添加到您的组件，您可以创建任何您喜欢的东西，例如您想要一个回调，这样您就可以创建一个名为 callback 的 prop 并使其成为一个函数。

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

假设我们将调用此组件CustomList.vue

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

import CustomList from "./CustomList.vue"

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

components: { CustomList }

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

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

希望这对您有所帮助，

门诺

在 nativescript-vue 中从 ListView 创建组件

Creating a component from a ListView in nativescript-vue

vue.js

nativescript-vue