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

Question

我开发了一个名为 Dashboard.vue 的页面，该页面包含三个子组件（Display、sortBooksLowtoHigh、sortBooksHightoLow）。仪表板组件包含一个 select 选项，里面还有两个选项“价格：从高到低和 Price:Low 到高”，

如果我点击 price:LowToHigh 选项，它会隐藏 Display 组件并显示 sortBooksLowtoHigh 组件 utpo 它工作正常，

现在，当我单击“price:High to Low”选项时，我又导入了一个名为 sortBooksHightoLow 的组件，它应该隐藏 DisplayComponent 并显示 sortBooksHightoLow component.How 来实现这一点，请帮助我

Dashboard.vue

<template>
<div class="main">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <img src="../assets/education.png" alt="notFound" class="education-image" />
        </div>
        <ul class="nav navbar-nav">
            <li>
                <p class="brand">Bookstore</p>
            </li>
        </ul>
        <div class="input-group">
            <i @click="handlesubmit();" class="fas fa-search"></i>
            <div class="form-outline">
                <input type="search"  v-model="name" class="form-control" placeholder='search...' />
            </div>
        </div>

        <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'" />
</div>
</template>

<script>
import service from '../service/User'
import sortBooksLowtoHigh from './sortBooksLowtoHigh.vue'
import sortBooksHightoLow from './sortBooksHightoLow.vue'
import DisplayBooks from './DisplayBooks.vue'
export default {
    components: {
        DisplayBooks,
        sortBooksLowtoHigh,
        sortBooksHightoLow
    },
    data() {
        return {
            flag: 'noOrder',
            brand: 'Bookstore',
            name: '',
           
            visible:true,
            books: [{

            }]
        }
    },
    methods: {
      
        flip() {
            this.flag = !this.flag;
        },
       
        applyOption(evt) {
            if (evt.target.value === "HighToLow") this.flag = 'highToLow';
            else this.flag = 'lowToHigh';
        },
    }

}
</script>

<style lang="scss" scoped>
@import "@/styles/Dashboard.scss";
</style>

sortBooksHightoLow.vue

<template>
<div class="carddisplay-section">
    <div v-for="book in books" :key="book.id" class="card book">
        <div class="image-section">
            <div class="image-container">
                <img v-bind:src="book.file" />
            </div>
        </div>
        <div class="title-section">
            {{book.name}}
        </div>
        <div class="author-section">
            by {{book.author}}
        </div>
        <div class="price-section">
            Rs. {{book.price}}<label class="default">(2000)</label>
            <button v-if="flag" class="btn-grp" type="submit" @click="handlesubmit();Togglebtn();">close</button>
        </div>
        <div class="buttons">
            <div class="button-groups">
                <button type="button" @click="toggle(book.id);flip(book.id);" v-if="state==true" class="AddBag">Add to Bag</button>
                <button v-if="state==true" class="wishlist">wishlist</button>
            </div>
            <div v-if="state==false" class="AddedBag">
                <button class="big-btn">Added to Bag</button>
            </div>
        </div>
    </div>

</div>
</template>

<script>
import service from '../service/User'

export default {

    data() {
        return {
            result: 0,
            authorPrefix: 'by',
            pricePrefix: 'Rs.',
            defaultStrikePrice: '(2000)',
            buttonValue: 'close',
            flag: true,
            state: true,
            clickedCard: '',
            books: [{
                id: 0,
                file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
                name: 'High to Low',
                author: 'Saioii',
                price: '1500'
            }, ]
        }
    },
    methods: {
        toggle(id) {
            this.clickedCard = id;
            // this.card.content = this.notes.filter((note) => note.id === id);
            console.log(this.clickedCard);
        },

        flip() {
            this.state = !this.state;
        },
        Togglebtn() {
            this.flag = !this.flag;
        },
        handlesubmit() {
            service.userDisplayBooksHightoLow().then(response => {
                this.books.push(...response.data);
            })
        },
    }
}
</script>

<style lang="scss" scoped>
@import "@/styles/DisplayBooks.scss";
</style>

sortBooksLowtoHigh.vue

<template>
<div class="carddisplay-section">
    <div v-for="book in books" :key="book.id" class="card book">
        <div class="image-section">
            <div class="image-container">
                <img  v-bind:src="book.file" />
            </div>
        </div>
        <div class="title-section">
            {{book.name}}
        </div>
        <div class="author-section">
            by {{book.author}}
        </div>
        <div class="price-section">
            Rs. {{book.price}}<label class="default">(2000)</label>
            <button v-if="flag" class="btn-grp" type="submit" @click="handlesubmit();Togglebtn();">close</button>
        </div>
        <div class="buttons">
            <div class="button-groups">
                <button type="button"  @click="toggle(book.id);flip(book.id);"  v-if="state==true" class="AddBag">Add to Bag</button>
                <button v-if="state==true" class="wishlist">wishlist</button>
            </div>
            <div v-if="state==false" class="AddedBag">
                <button class="big-btn">Added to Bag</button>
            </div>
        </div>
    </div>

</div>
</template>

<script>
import service from '../service/User'

export default {

    data() {
        return {
            result: 0,
            authorPrefix: 'by',
            pricePrefix: 'Rs.',
            defaultStrikePrice: '(2000)',
            buttonValue: 'close',
            flag: true,
            state: true,
            clickedCard: '',
            books: [{
                id: 0,
                file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
                name: 'Default Card',
                author: 'Sai',
                price: '..'
            }, ]
        }
    },
    methods: {
         toggle(id) {
            
            this.clickedCard = id;
            // this.card.content = this.notes.filter((note) => note.id === id);
          console.log(this.clickedCard);
        },
    
        flip() {
            this.state = !this.state;
        },
        Togglebtn() {
            this.flag = !this.flag;
        },
        handlesubmit() {
            service.userDisplayBooksLowtoHigh().then(response => {
                this.books.push(...response.data);  
                console.log(this.response);   
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    @import "@/styles/DisplayBooks.scss";
</style>

Answer 1

嗯... HightoLow => HighToLow.

Answer 2

在我看来，可以有多种方法来实现组件的条件渲染，我认为您的问题是这样要求的。其中两个非常有用的是：

使用 v-if 和 v-else，您必须定义一个标志来处理组件呈现的逻辑。此外，将它们包装在转换标签中是使用转换进行切换的好主意。

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

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

<component is="nameofComponent" />

您可以阅读更多关于 vuejs 动态组件的内容docs。

虽然动态组件看起来很整洁，但带有过渡的开关可能是一个不错的补充。

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

How to toggle between components in vue.js?

javascript

vue.js

vue-component

vuejs2