Nativescript Vue Javascript导入自定义元素，如Button、FieldView、Label e

Question

是否可以用Textfield这样的单个元素创建一个component_1.vue并像这样导出：

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

Answer 1

这当然是可能的。

一个很好的例子可以在Nativescript示例页面(Restaurant Menu App-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布局中使用的自定义组件：

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

你可以在应用程序的自定义文件夹下看到自定义组件

希望能有所帮助。