vuejs 条件包装器 [英] vuejs conditional wrapper

问题描述

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

In my nativescript-vue application I have a singleFile component called profileForm. I want to use that component in two ways, if the user is logged in I want to have that component as the slot of my layout component to edit profile. Otherwise I want is as a registration form.

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

I don't want to create an extra component for handling this. So in one case I would like to have my component wrapped in a tag so I can navigate to it, with Vue.$navigateTo, in another case I'd like to wrap it in a component. But the component has a tag in itself so in that case I don't want the anymore.

在 django 模板中，我会做这样的事情:

In django templates I would do something like this:

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

当然这在 vuejs 中是行不通的.有没有办法在 vuejs 中实现这一点?

But of course this would not work in vuejs. Is there any way to achieve this in vuejs?

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

I could create a new component and wrap this there like so:

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

但我不想为此任务创建新组件.

But I'd rather not create a new component for this task.

我希望得到这样的东西:

I was hoping to get something like this:

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

nativescript-vue 有这样的语法吗?

Does nativescript-vue have such syntax?

推荐答案

一种方法:

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

One way to do it:

I would go with a v-if / v-else logic if you have only two distinct but predefined options. Simply more semantic.

<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>

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

There are several other ways to achieve the same result; however without knowing more about the requirements I will just leave you with this first option :)

这篇关于vuejs 条件包装器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！