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

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 示例页面（餐厅菜单应用程序 - 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" />

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

希望对您有所帮助。

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

Nativescript-Vue Javascript import custom elements like Button, FieldView, Label ecc

android

ios

nativescript-vue