如何在 nativescript-vue 弹出窗口中使用 vue 组件？

Posted 2023-04-14

【中文标题】如何在 nativescript-vue 弹出窗口中使用 vue 组件？

【英文标题】：How to use vue components in nativescript-vue popups?

【发布时间】：2019-11-30 07:56:38

【问题描述】：

我在一些根组件中打开弹出窗口，如下所示：

import parentt from "./parentt.vue";
.
.
.
this.$showModal(parentt, 
  fullscreen: true,
);

这是parentt.vue的内容：

<template>
  <StackLayout>
    <label text="parent" />
    <!-- <child /> -->
  </StackLayout>
</template>

<script>
  import child from "./child.vue";
  export default 
    components: [child],
  ;
</script>

<style scoped>
</style>

这是child.vue的内容：

<template>
  <StackLayout>
    <label text="child" />
  </StackLayout>
</template>

<script>
  export default ;
</script>

<style scoped></style>

<child /> 注释掉了，我得到一个弹出窗口，其中包含文本父项。

<child /> 在那里我得到一个白屏。

我在代码的不同位置使用了许多组件，它只是在弹出窗口中不起作用。

【参考方案1】：

parentt.vue 的组件对象中的括号有误。组件是一个对象，因此使用大括号代替方括号。

因此，正确的脚本部分类似于parentt.vue：

<script>
  import child from "./child.vue";
  export default 
    components: 
       child
    ,
  ;
</script>

我推荐official vue documentation了解详细信息

【讨论】：

我不认为这个名字真的很重要......问题出在括号上:(我的心碎了。我花了 3 个小时。如果我不会得到错误用过 vue-debugger？

您可以将浏览器控制台或命令行工具用于这些目的。

我没有使用浏览器。这是一个原生脚本应用程序。