如何在vue.js中的组件之间切换？

mm9b1k5b 于 2021-09-23 发布在 Java

关注(0)|答案(2)|浏览(343)

我开发了一个名为dashboard.vue的页面，该页面包含三个子组件（display、sortbookslowtoh、sortbookshightolow）。 Jmeter 板组件中还包含一个选择选项，它有两个选项“价格：从高到低和价格：从低到高”，
如果我点击price:lowtohig选项，那么它会隐藏显示组件并显示Sortbookslowtohig组件utpo，这工作正常，
现在，当我点击“价格：从高到低”选项时，我又导入了一个名为sortbookshightolow的组件。它应该隐藏displaycomponent并显示sortbookshightolow组件。如何实现这一点请帮助我 Dashboard.vue ```

    <ul class="nav navbar-nav navbar-right" id="right-bar">
        <li><a> <i class="far fa-user"></i></a></li>
        <p class="profile-content">profile</p>
        <li><a><i class="fas fa-cart-plus"></i></a></li>
        <p class="cart-content">cart</p>
    </ul>
</div>
<div class="mid-body">
    <h6>Books<span class="items">(128items)</span></h6>

    <select class="options" @change="applyOption">
        <option disabled value="">Sort by relevance</option>
        <option value="HighToLow">price:High to Low</option>
        <option value="LowToHigh">price:Low to High</option>
    </select>
</div>

<DisplayBooks v-show="flag==='noOrder'" />
<sortBooksLowtoHigh v-show="flag==='lowToHigh'" />
<sortBooksHightoLow v-show="flag==='highToLow'" />

`sortBooksHightoLow.vue`

`sortBooksLowtoHigh.vue`

vue.js JavaScript vuejs2 vue-component

来源：https://stackoverflow.com/questions/68325739/how-to-toggle-between-components-in-vue-js

2条答案

按热度按时间

x9ybnkn61#

嗯。。。hightolow=>hightolow。

赞(0）回复(0）举报 2021-09-23

fkvaft9z2#

在我看来，有几种方法可以实现组件的有条件渲染，我认为这是您的问题所要求的。其中两个非常有用的方法是：
使用 v-if 及 v-else 其中，必须定义一个用于处理组件渲染逻辑的标志。此外，将它们 Package 在转换标记中是一个使用转换进行切换的好主意。

<transition>
  <component1 v-if="flag" />
  <component2 v-else />
</transition>

动态组件，我们使用 component 标签和 is 属性然后可以使用组件的名称切换组件。

<component is="nameofComponent" />

您可以在vuejs文档中阅读有关动态组件的更多信息。
虽然动态组件看起来很整洁，但带有转换的开关可能是一个不错的添加。

赞(0）回复(0）举报 2021-09-23

我来回答

如何在vue.js中的组件之间切换？

2条答案

相关问题

热门标签

最新问答