Nativescript- Vue Javascript импорт пользовательских элементов, таких как Button, FieldView, Label ecc - PullRequest
Новая
       16

Nativescript- Vue Javascript импорт пользовательских элементов, таких как Button, FieldView, Label ecc

0 голосов
/ 27 марта 2020

Можно ли создать component_1.vue с одним элементом, например Textfield, и экспортировать его следующим образом: 

<template>
  <TextField
    :text="textFieldValue"
    hint="Hint here.."
    class="textfield"
  />
</template>

<script>
export default {
    name: 'Custom_TextField',
    data: function () {
        return {
            class: class,
            text: text 
        }
    }
}
</script>

И использовать его в другом component_2.vue? 

<template>
  <Label text="Component_1 below" />
  <Custom_TextField />
</template>

<script>
import component_1.vue from "@/components/component_1.vue"

export default {
}
</script>

1 Ответ

0 голосов
/ 29 марта 2020

Это, безусловно, возможно.

Хороший пример можно найти на странице примеров Nativescript (приложение для меню ресторана - market.nativescript.org )

А вот его Код игровой площадки: https://play.nativescript.org/?template=play-vue&id=sPOHNo&v=278

Если вы откроете компонент Home. vue, вы увидите, как 3 пользовательских компонента импортируются, а затем используются в макете Nativescript сверху.

Пользовательские компоненты в Home. vue: 

import navBottom from "./custom/navBottom";
import Item from "./custom/item";
import Category from "./custom/category";

Пользовательские компоненты, используемые в Home. vue layout: 

<item :item="item" @clicked="showItem(item)" />
<Category :item="item"> </Category>
<navBottom row="3" />

Пользовательские компоненты отображаются под Пользовательская папка приложения

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

...