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

一种方法：

如果您只有两个不同但预定义的选项，我会选择 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>

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

Answer 2

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

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

见https://vuejs.org/v2/guide/components.html#Dynamic-Components
请注意，传递一个未在组件中声明的道具（例如，actionBarHidden 被传递给 AppLayout，后者不使用它）没有任何效果并且是完全安全的。

这是一个老问题，但我发现自己遇到了同样的情况，所以我回来补充这个答案。编辑：@MarcRo 已经提供了相同的答案，有点隐藏在上面的评论中。

vuejs 条件包装器

vuejs conditional wrapper

vue.js

nativescript-vue

一种方法：