在 nativescript-vue 中从 ListView 创建组件答案

【问题标题】：Creating a component from a ListView in nativescript-vue在 nativescript-vue 中从 ListView 创建组件
【发布时间】：2019-03-17 14:37:52
【问题描述】：

我正在学习 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 正在执行循环并且正在处理布局。这如何转化为使用单独的组件来呈现客户列表？

【问题讨论】：

标签： vue.js nativescript-vue

【解决方案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: {
  items: Array,
  callback: Function
},

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

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

import CustomList from "./CustomList.vue"

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

components: { CustomList }

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

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

希望这会有所帮助，

门诺

【讨论】：