Vue.js页脚组件对其他组件起作用？

Question

我是Vue.js的新手，他正在构建一个带有页眉/页脚（显示在某些页面上）的应用，并且在页脚中我有一个购物车。

基本上可以在应用程序的某些页面上将商品添加到购物车，并在页脚中带有图标，我可以访问商品列表，并在需要时删除它们。

我的购物车在我的应用上方全屏显示为对话框。

问题是，如果我清空购物车，我想在关闭购物车之前在购物车后重新加载组件（因为步骤不一样...），而且我不知道该怎么做，实际上，如果我在购物车为空时关闭购物车，我正在重新加载页面。

这是我的页脚部分（带购物车）：

var footer = Vue.component("iteck-footer", {
    template: `<div>
    <v-footer fixed height="auto" color="teal" dark>
    <v-layout class="pl-2 pr-2" justify-center row wrap>

            <v-dialog fullscreen v-model="dialog" transition="dialog-bottom-transition">
                <v-toolbar fixed dense dark color="teal">
                  <v-spacer></v-spacer>
                  <v-toolbar-title>Panier</v-toolbar-title>
                  <v-spacer></v-spacer>
                  <v-toolbar-items>
                    <v-btn icon dark @click="dialog = false">
                        <v-icon>close</v-icon>
                      </v-btn>
                  </v-toolbar-items>
                </v-toolbar>
                <div class="content-with-header-footer">
                    <div v-if="articles.length > 0">
                        <div v-for="article in articles" :key="article.LIG">
                            <v-checkbox class="inputs-panier pa-0 ma-0 " v-model="article.selected">
                                <template slot="label">
                                <div>{{article.DESIG}} | <b>Qté.</b> : {{quantite(article.QTESAI)}}</div>
                                <div>{{article.CLE}} {{article.CODBAR}}</div>
                                </template>
                            </v-checkbox>
                        </div>
                    </div>
                    <div class="text-xs-center mt-4" v-else>
                        <h2 class="red--text">Panier vide</h2>
                    </div>
                </div>
                <v-footer fixed height="auto" color="teal" dark>
                    <v-btn @click="deleteLignesPanier()" class="mx-0" icon>
                        <v-icon>delete</v-icon>
                    </v-btn>

                    <v-spacer></v-spacer>

                    <v-btn @click="validerPanier()" class="mx-0" icon>
                        <i class="material-icons">check</i>
                    </v-btn>

                </v-footer>
            </v-dialog>

        <v-btn style="position:relative;" @click="openMenu()" class="mx-0" icon>
            <i class="material-icons">shopping_basket</i>
            <span id="nb_articles">
                {{articles.length}}
            </span>
        </v-btn>

        <v-spacer></v-spacer>

        <v-btn @click="validerPanier()" class="mx-0" icon>
            <i class="material-icons">check</i>
        </v-btn>

      <v-dialog v-model="modal" max-width="290">
      <v-card>
        <v-card-text>
          {{modalMessage}}
        </v-card-text>

        <v-card-actions>
          <v-btn color="green darken-1" flat="flat" @click="modal = false; modalMessage = ''">
            OK
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    </v-layout>
  </v-footer>
</div>`,
    props: ["menu"],
    data() {
        return {
            modal : false,
            modalMessage : "",
            entete: null,
            articles: [],
            dialog: false
        }
    },
    mounted() {
        this.getPanier()
    },
    watch: {
        // whenever question changes, this function will run
        dialog: function (newValue, oldValue) {
            if(newValue === false && this.articles.length === 0)
                location.reload();
        }
    },
    methods: {
        async openMenu() {
            this.articles = [];
            this.entete = null;
            if(this.dialog === false) {
                //Récuperation du panier en cours.
                this.getPanier();
            }
            this.dialog = true;
        },
        async deleteLignesPanier() {
            let lignes = "";

            for (let i=0; i < this.articles.length; i++ ) {
                if(this.articles[i].selected === true) {
                    if(lignes === "")
                        lignes = lignes + this.articles[i].LIGNE;
                    else
                        lignes = lignes + "," + this.articles[i].LIGNE;
                }
            }

            if(lignes !== "") {

                //On envoie la requête au serveur.
                let data = await wspda.deleteLignesPanier(this.menu,lignes);

                if(data == 'true')
                {
                    console.log('OUI');
                    console.log('length',this.articles.length);
                    console.log('articles',this.articles);
                    for (let i = this.articles.length -1; i >= 0; i-- ) {
                        if(this.articles[i].selected === true) {
                            this.articles.splice(i,1);
                        }
                    }
                }
                else
                {
                    console.log(data);
                }
            }

        },
        async validerPanier() {
            if(this.articles.length > 0) {
                let data  = await wspda.validerPanier(this.menu,"","False");
                this.modal = true;
                this.modalMessage = data;
                this.articles = [];
            }
        },
        async getPanier() {
            let data = await wspda.getPanier(this.menu);
            if(data.ProDataSet && data.ProDataSet.PANIERENT && data.ProDataSet.PANIERLIG) {

                if(Array.isArray(data.ProDataSet.PANIERLIG)) {
                    this.articles = data.ProDataSet.PANIERLIG;
                } else {
                    this.articles.push(data.ProDataSet.PANIERLIG);
                }

                this.entete = data.ProDataSet.PANIERENT;

                for (let i=0; i<this.articles; i++ ) {
                    this.articles[i].selected = false;
                }
            }
        },
        quantite(qtesai) {
            return (qtesai % 1) === 0 ? Math.round(qtesai) : qtesai;
        }
    }
});

如您所见，在我的观察器中，关闭购物车时，我可能会重新加载页面...但是有一种方法，当购物车为空（删除项目）时，请在对话框后面重新加载当前组件??无法找到合适的方法。

我的当前组件在后面运行（仅作为示例）：

var spaHome = Vue.component("Home", {
    template: `<div>
        <v-container fill-height>
            <v-layout>
                <v-flex>
                <v-list>
                    <v-list-tile class="menu-home"
                       v-for="(item,index) in menus" :key="index" @click="$router.push(item.path)" v-if="item.value">
                        <!--<v-list-tile-action>
                            <v-icon>{{ item.icon }}</v-icon>
                        </v-list-tile-action>-->
                        <v-list-tile-content class="teal darken-3 white--text">
                            <v-list-tile-title class="text-xs-center">{{ item.label }}</v-list-tile-title>
                        </v-list-tile-content>
                    </v-list-tile>
                </v-list>
                </v-flex>
            </v-layout>
        </v-container>
</div>`,
    props: ["title"],
    $_veeValidate: {
        validator: "new"
    },
    data() {
        return {
            menus: conf.Menus,
        }
    },
    methods: {
    }
}); 

顺便说一句，我没有使用node.js等...因为我无法在节点服务器上运行该应用程序，所以不能使用“ import”，“ export” ...