vue.js中的图标发生onclick功能时如何在组件之间切换？

Question

我有四个组件Dashboard.vue（父组件）它包含三个子组件（DisplayBooks.vue、sortBooksHightoLow、sortBooksLowtoHigh）。

现在我想在 Dashboard.vue 中导入一个名为 Cart.vue 的组件。默认情况下只有 DisplayBooks.vue 组件是可见的，如果我点击仪表板中的购物车图标组件它显示 Cart.vue 组件并隐藏 DisplayBooks.vue 组件。

如何实现这个东西请帮我解决这个问题..

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 <span class="length" v-if="booksCount">{{booksCount}}</span></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>

    <div v-if="flam==false">
        <h2>Hello</h2>
    </div>
    <DisplayBooks v-show="flag==='noOrder'" @update-books-count="(n)=>booksCount=n"/>
    <sortBooksLowtoHigh v-show="flag==='lowToHigh'" />
    <sortBooksHightoLow v-show="flag==='highToLow'" />
    <Cart />
</div>
</template>

<script>
import sortBooksLowtoHigh from './sortBooksLowtoHigh.vue'
import sortBooksHightoLow from './sortBooksHightoLow.vue'
import DisplayBooks from './DisplayBooks.vue'
import Cart from './Cart.vue'
export default {
    components: {
        DisplayBooks,
        sortBooksLowtoHigh,
        sortBooksHightoLow,
        Cart
    },
    data() {
        return {
             booksCount:0,
            flag: 'noOrder',
            brand: 'Bookstore',
            name: '',
            flam: true,
            visible: true,
        }
    },
    methods: {

        flip() {
            this.flam = !this.flam;
        },

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

}
</script>

Cart.vue

<template>
<div class="main">
    <div v-for="book in books" :key="book.id"  class="container">
        <div class="content">
             <h5>My Cart({{booksCount}})</h5>
        </div>
    <div class="mid-section">
        <img v-bind:src="book.file"  alt="not found">
        <p class="title-section">{{book.name}}</p>
    </div>
    <div class="author-section">
        <p>by {{book.author}}</p>
    </div>
    <div class="price-section">
        <h6>Rs.{{book.price}}</h6>
    </div>
<button class="close-btn"  @click="handlesubmit();" type="submit">close</button>
    <div class="btn-grps">
        <button class="btn" type="submit" >Place Order</button>
    </div>
    </div>
</div>
</template>
<script>
import service from '../service/User'
export default{
   data(){
       return {
            booksCount:0,
            books: [{
                id: 0,
                file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
                name: 'Dont Make me think',
                author: 'Sai',
                price: '1500'
            },]
       }
   },
   methods:{
   
   }
}
</script>

Answer 1

建议使用 vur-router，但对于简单的情况，您可以定义一个名为 shownComp 的属性，然后在您单击购物车图标时更新：

  data() {
        return {
             shownComp:'DisplayBooks',
             booksCount:0,
            flag: 'noOrder',

然后 <li @click="shownComp='Cart'"><a><i class="fas fa-cart-plus"></i></a></li>

和：

<DisplayBooks v-show="flag==='noOrder' && shownComp==='DisplayBooks'" @update-books-count="(n)=>booksCount=n"/>

<Cart v-show=" shownComp==='Cart'" />
...

vue.js中的图标发生onclick功能时如何在组件之间切换？

How to toggle between components when onclick function happens on a icon in vue.js?

vue.js

vue-component

vuejs2