VueJS布局中的组件不更新答案

【问题标题】：VueJS a component in a layout does not updateVueJS布局中的组件不更新
【发布时间】：2018-09-26 14:36:08
【问题描述】：

我已经关注了这篇博文：Dynamic Vue.js Layout Components，使用动态组件构建了一些布局。

我现在在布局中放置了一个侧导航栏来更新路由器视图。虽然导航有效，但我无法显示活动链接的修改样式。如果我将它导入到布局之外的主页中，该组件将按预期工作。我想那是因为每次路线更改都会重新安装它。但在布局中，没有任何变化。我认为这是因为当路线改变时布局不会重新渲染。我试过 vm.$forceUpdate 没有成功，所以我正在寻找正确的方法来让组件在被点击后重新安装（如果这确实是问题的根源）

更新：我已设法在代码和框中显示此内容以使其更易于理解：codesandbox.io/s/mqwl3jlvx8

我的代码如下所示：应用程序.vue：

<template>
 <div id="app">
  <v-app>
    <component :is="layout">
      <router-view :layout.sync="layout"/>
    </component>>
  </v-app>   
  </div>
</template>
<script>

export default {
  name: 'App',
  data() {
    return {
      layout: 'div',
    };
  },
}
</script>

布局文件：

<template>
  <div class="LayoutDefault">

        <div class="box">

            <div class="wrapper">
            <SideNav class="sidenav" />
            <slot class="main"/>
            </div>
        </div> 

  </div>
</template>

<script>
import SideNav from '@/components/crmSideNav.vue'

export default {
  name: "LayoutDefault",
  components: { SideNav, }

};
</script>

SideNav 组件然后有一个 v-for 用于几个 NavItem 组件，数据作为 props 传递。在 NavItem 组件中，我有以下方法：

goTo(){
            this.myIconColor = this.iconColor
            this.myTextColor = this.textColor
            this.$router.push({ path: this.path })
        }


    },
mounted(){

      if(this.$route.path === this.path) { 

          this.myIconColor = this.highlightColor
          this.myTextColor = this.highlightColor
          this.myBackgroundColor = 'rgba(0,0,0,0.1)'

        }
    }

【问题讨论】：

试图将keep-alive 包装在您的动态组件上？ vuejs.org/v2/guide/components-dynamic-async.html
我在动态组件内部没有问题，但在包装它的布局中。我在布局中的 Nav 组件在开始时不会只触发一次安装的功能，而不是在每个被点击的项目上

标签： vue.js vuejs2

【解决方案1】：

在挂载未触发的情况下，我通过在父项和 NavItem 子项之间交换事件来解决此问题。由于孩子们处于 v-for 循环中，我需要设置并传递索引以及 ref 以便正确触发事件。现在，在路由更改时，发射链接获得活动样式，其他子节点将自己设置为“中性”。

working example

SideNav 父级现在看起来像这样：

    <template>
<div class="main">

      <SideNavItem v-for="(link,index) in links" 
                  :key="link.id"
                  :path="link.path"
                  :text="link.text"
                  :index="index"
                 ref="setStyle"
                  @clicked="updateStyle"  />

</div>
</template>

<script>
import SideNavItem from "./SideNavItem.vue";

export default {
  components: {
    SideNavItem
  },
  data() {
    return {
      links: [
        { id: 1, text: "GoTo Page1", path: "/" },
        { id: 2, text: "GoTo Page2", path: "/page2" },
        { id: 3, text: "GoTo Page3", path: "/page3" }
      ]
    };
  },
  methods: {
    updateStyle( index) { 

        var i;
        for (i = 0; i < this.links.length; i++) { 
           this.$refs.setStyle[i].changeStyle( index);
        }

      },
  }
};
</script>

还有子 NavItem：

    <template>

  <div class="link1" @click="changePage" :style="{ backgroundColor: 
  setBackground, color:setColor }">
  {{ text }}
  </div>

</template>
<script>
export default {
  props: {
    path: { type: String },
    text: { type: String },
    index: { type: Number},
  },
  data() {
    return {
      myBackgroundColor: "",
      myColor: ""
    };
  },
  computed: {
    setBackground() {
      return this.myBackgroundColor;
    },
    setColor() {
      return this.myColor;
    }
  },
  methods: {
       changePage(){

            this.$emit('clicked',this.index)

            this.$router.push({ path: this.path })
        }, 
        changeStyle(index) {

            if (this.index === index) {
            this.myBackgroundColor = "blue";
            this.myColor = "white";
            }
            else  {
             this.myBackgroundColor = "";
            this.myColor = "";
            }

        },
  },

};
</script>

【讨论】：