Блог

Я изучаю 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 выполняет цикл и обрабатывает макет. Как это переводится в использование отдельного компонента для отображения списка клиентов?

Создайте свой шаблон:

 <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>
  

Добавьте реквизит к вашему компоненту, вы можете создать все, что вам нравится, например, вы хотите обратный вызов, чтобы вы могли создать реквизит с именем callback и сделать его функцией.

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

Допустим, мы назовем этот компонент CustomList.vue

Теперь вы можете импортировать компонент из другого вашего файла

 import CustomList from "./CustomList.vue"
  

Добавьте компонент в свой файл vue через поле components (компоненты).

 components: { CustomList }
  

Теперь вы можете использовать его внутри шаблона следующим образом:

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

Надеюсь, это поможет,

Менно