vuejs 条件包装器

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>

还有其他几种方法可以达到相同的效果；但是，在不了解更多要求的情况下，我只会让您选择第一个选项 :)