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

Posted 2023-04-14

【中文标题】Nativescript-Vue Javascript 导入自定义元素，如 Button、FieldView、Label ecc

【英文标题】：Nativescript-Vue Javascript import custom elements like Button, FieldView, Label ecc

【发布时间】：2020-07-08 12:51:15

【问题描述】：

是否可以使用像 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>

【参考方案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" />

可以在app的自定义文件夹下看到自定义组件

希望对您有所帮助。