vue.js - 如何更改另一个组件数据

Question

activetab当我单击组件中的按钮时，我需要更改另一个tabsnavlist组件。tabsnavlist工作正常，但我无法理解如何将activetab数据传输到另一个组件。

<template lang="pug">
    nav.card-menu-box(:style="{'min-height': sizeblock+'px'}")
        .card-menu-box__wrap
            .card-menu-box__float(:class="{'float': floatblock, 'fixed-f': fixedfooter}")
                .wrap
                    button.btn.btn_alt.btn_noactive(:class="{'active': activetab == index}", v-for="item, index in buttons", :data="item", :key="item", @click="activetab = index") {{ item }}

</template>

<script>
export default {
    name: "tabsnavlist",
    data() {
        return {
            activetab: 0,
            tabint: 0,
            floatblock: false,
            sizeblock: 0,
            getFooterPos: 0,
            fixedfooter: false
        }
    },
    props: {
        buttons: {
            type: Array,
            default: function() {return []}
        }
    },
    mounted() {
        this.hResize();
        this.handleScroll();
    },
    created: function () {
        window.addEventListener('scroll', this.handleScroll);
        window.addEventListener('resize', this.hResize);
    },
    destroyed: function () {
        window.removeEventListener('scroll', this.handleScroll);
        window.removeEventListener('resize', this.hResize);
    },
    methods: { 
        navToFooter() {
            if(window.scrollY > document.getElementsByClassName("g__footer")[0].offsetTop - window.innerHeight) {
                this.fixedfooter = true
            } else {
                this.fixedfooter = false
            }
        },
        handleScroll() {
            if(this.$el.getBoundingClientRect().top <= 0) {
                this.floatblock = true
            } else {
                this.floatblock = false
            }
            this.navToFooter();
        },
        hResize() {
            this.navToFooter();
            this.sizeblock = parseInt(this.$el.children[0].clientHeight);
        }
    }
}
</script>

在页面中我有 htmltabblock是：

productpage
   .grid
      tabsnavlist(:buttons="[1,2,3]"

   .gridst
     p there is another html, thats why i cant compare it in one component

   .grid   
      tabblocks
        tablock(title="1" :class="{'active': activetab == index}") 
          p tab 1
        tablock(title="2" :class="{'active': activetab == index}")
          p tab 2
        tablock(title="3" :class="{'active': activetab == index}")
          p tab 3

标签： vue.js

Answer 1

您可以为此使用 vuex，https: //vuex.vuejs.org 。