Question

在我的nativescript-vue应用程序中，我有一个名为profileForm的singleFile组件。我想以两种方式使用该组件，如果用户已登录，则希望将该组件作为布局组件的插槽以编辑配置文件。否则我想要的是注册表。

我不想创建一个额外的组件来处理这个问题。因此，在一种情况下，我希望将组件包装在标签中，以便可以使用Vue。$ navigateTo导航至该标签，在另一种情况下，我希望将其包装在组件中。但是该组件本身具有标签，因此在这种情况下，我就不再想要了。

在Django模板中，我将执行以下操作：

<template>
  <Page v-if="is_signup" actionBarHidden="true">
  <AppLayout v-else title="Profile">
  ...
  </AppLayout v-else>
  </Page v-if="is_signup">
</template>

但是，这当然在vuejs中不起作用。有什么方法可以在vuejs中实现吗？

我可以创建一个新组件并将其包装在其中，如下所示：

<template>
  <Page v-if="is_signup" actionBarHidden="true">
    <ProfileForm/>
  </Page>
  <AppLayout v-else title="Profile">
    <ProfileForm/>
  </AppLayout>
</template>

但是我不想为此任务创建一个新组件。

我希望得到这样的东西：

<template>
  <template :is="is_signup?'Page':'AppLayout'" :v-bind="is_signup?{actionBarHidden:true}:{title:'Profile'}">
    ...
  </template>
</template>

nativescript-vue是否具有这种语法？

Answer 1

这可以通过使用通用的component元素来解决：

<template>
    <component :is="is_signup ? 'Page' : 'AppLayout' actionBarHidden="true">
    ...
   </component>
</template>

请参见https://vuejs.org/v2/guide/components.html#Dynamic-Components
请注意，传递未在组件中声明的prop（例如，将actionBarHidden传递给AppLayout，它不使用它）是无效的，并且是完全安全的。

这是一个古老的问题，但是我发现自己处在相同的情况下，所以我回来添加了这个答案。编辑：@MarcRo已经提供了相同的答案，在上面的评论中有些隐藏。

Answer 2

一种方法：

如果您只有两个不同但预定义的选项，我会采用v-if / v-else逻辑。只是更具语义。

<template>
  <Page
    v-if="is_signup"
    :actionBarHidden="true"
  >
    <Label :text="'hello'" />
  </Page>
  <Label
    v-else
    :text="'hello'"
  />
</template>

<script>
import Label from '../components/Label.vue';
import Page from '../components/Page.vue';

export default {
  components: {
    Page,
    Label,
  },

  data() {
    return {
      is_signup: false, // you will have to find a way to set is_signup correctly
    };
  },
}
</script>

还有其他几种方法可以达到相同的结果。但是，在不了解更多要求的情况下，我只会选择第一种方法：）

vuejs条件包装器

2 个答案:

一种方法：