如何将数据（书籍数组长度）从一个组件传递到 vue.js 中的另一个组件？

Question

I am developing one page which is responsible for displaying Books(child component) on Dashboard(Parent-component) .

In DisplayBooks component the data is coming from backend and stored inside a books array based on that i am iterating using for loop and displaying in my UI page, Now i want to transfer books[] array length to the Dashboard component and binded into the template section ,please help me how to acheive this thing....

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 @click="shownComponent='Cart'"><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">
<!-- here i want to display books array length -->
        <h6>Books<span class="items">({{books.lengthh}})</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' && shownComponent==='DisplayBooks'" @update-books-count="(n)=>booksCount=n"/>
    <Cart v-show=" shownComponent==='Cart'"   />
    <sortBooksLowtoHigh v-show="flag==='lowToHigh'" @update-books-count="(n)=>booksCount=n" />
    <sortBooksHightoLow v-show="flag==='highToLow'" @update-books-count="(n)=>booksCount=n" />
   
</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 {
            shownComponent:'DisplayBooks',
             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>

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

DisplayBooks.vue

<template>
<div class="carddisplay-section">
      
    <div v-for="book in books" :key="book.id" class="card book"  @mouseover="book.hover = true"
     @mouseleave="book.hover = false">
        <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>
           
        </div>
      
        <div class="buttons">
            <div class="button-groups"  v-if="!addedBooks.includes(book.id)">
                <button type="submit"  @click="handleCart(book.id);toggle(book.id);addedBooks.push(book.id)"  class="AddBag">Add to Bag</button>
                <button  class="wishlist">wishlist</button>
            </div>
            <div class="AddedBag" v-else>
            <button class="big-btn" @click="removeFromCart(book.id);addedBooks=addedBooks.filter(id=>id!==book.id)">Added to Bag</button>
            </div>
        </div>
        <div class="description" v-if="book.hover">
            <p class="hovered-heading">BookDetails</p>
            {{book.description}}
        </div>
    </div>
</div>
</template>

<script>
import service from '../service/User'
export default {
      mounted() {
           service.userDisplayBooks().then(response => { 
        let data = response.data;
        data.map(function(obj) {
            obj.hover = false;
            return obj;
        });

        this.books.push(...data); 
        return response; 
    })
        },
    data() {
        return {
            isActive:true,
            result: 0,
            authorPrefix: 'by',
            pricePrefix: 'Rs.',
            defaultStrikePrice: '(2000)',
            buttonValue: 'Add to Bag',
            buttonWishlist:'wishlist',
            buttonAddedBag:'Added to Bag',
            flag: true,
            state: true,
            addedBooks:[],
            clickedCard: '',
            books: []            //this length i want to transfer
        }
    },
    watch:{
    addedBooks:{
            handler(val){
               this.$emit('update-books-count',val.length)
             },
             deep:true
          }
        },
    methods: {
        toggleClass: function(event){
            this.isActive = !this.isActive;
            return event;
        },
         toggle(id) {
            this.clickedCard = id;
            console.log(this.clickedCard);
          
        },
        flip() {
            this.state = !this.state;
        },
        Togglebtn() {
            this.flag = !this.flag;
        },
  
        handleCart(bookId){
            let userData={
                id: bookId,
            }
            service.userUpdateCart(userData).then(response=>{
                return response;
            }).catch(error=>{
                alert("error while displaying Books");
                return error;
            })
        },
        removeFromCart(bookId){
            let userData={
                id:bookId,
            }
            service.userRemoveFromCart(userData).then(response=>{
                return response;
            }).catch(error=>{
                alert("error while removing from cart");
                return error;
            })
        }
    }
}
</script>

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

Answer 1

Binding data from a child to a parent can be solved using two-way binding.

If you use Vue 2, Use ".sync". I recommend the link below.

https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

example:

Parent

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

...
watch:{
booksCount(newCount){
  console.log(this.booksCount)
}
...

Child

...
props: ['count']
...

...
mounted() {
    service.userDisplayBooks().then(response => {
        let data = response.data;
        data.map(function(obj) {
            obj.hover = false;
            return obj;
        });

        this.books.push(...data);
        this.$emit('update:count', this.books.length)
        return response;
    })
},
...