有条件地定义了VueJS中的导入组件

发布于 2025-02-10 10:39:41 字数 519 浏览 1 评论 0原文

可以说，我在VUEJS中有一个父母组件，其中有两个版本的子组件（a，b）。有办法做这样的事情吗？动态定义组件，而不是使用V-IF和V-ELSE？

<template>
    <Child />
</template>

<script>
import A from './components/A.vue';
import B from './components/B.vue';

export default {
  name: 'Parent',
  components: {
    Child: () => {
      if (renderA === true) {
        return A;
      } else {
        return B;
      }
    },
  },
  computed: {
    renderA() {
      return Math.random() < 0.5;
    },
  }
}
</script>

原文

Lets say i have a parent component in VueJs with two versions of child component (A, B).
Is there a way to do something like this? Dynamically define component rather than using v-if and v-else?

<template>
    <Child />
</template>

<script>
import A from './components/A.vue';
import B from './components/B.vue';

export default {
  name: 'Parent',
  components: {
    Child: () => {
      if (renderA === true) {
        return A;
      } else {
        return B;
      }
    },
  },
  computed: {
    renderA() {
      return Math.random() < 0.5;
    },
  }
}
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

远山浅 2025-02-17 10:39:41

您可以使用＆lt;组件＆gt;标签。 vue docs

<template>
    <component :is="toRender" />
</template>

<script>
import A from './components/A.vue';
import B from './components/B.vue';

export default {
  name: 'Parent',
  computed: {
    toRender() {
      return Math.random() < 0.5 ? A : B
    },
  }
}
</script>

You can use the <component> tag. Vue Docs

<template>
    <component :is="toRender" />
</template>

<script>
import A from './components/A.vue';
import B from './components/B.vue';

export default {
  name: 'Parent',
  computed: {
    toRender() {
      return Math.random() < 0.5 ? A : B
    },
  }
}
</script>

回复收藏 0 原文

~没有更多了~