问题描述

在我写我的博客的后台管理的时候遇到了这么一个问题,有如下的一组标签页，里面展示的数据共用一个组件。
由于使用同一个组件，在我执行了删除文章到回收站或者恢复回收站的文章的时候，当前标签页下的组件无法影响影响其他标签页的组件，因此会导致我在删除/恢复文章之后我去回收站/文章列表查看刚刚操作的文章未出现在列表中，自己需要额外进行一次查询才会显示。
（假装有图)
代码如下，其中 article 是我定义的复用组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<el-tabs v-model="activeName">
  <el-tab-pane label="已发布" name="all">
    <articles
      state="-2"
      :showEdit="true"
      :showDelete="true"
      :showRestore="false"
      :activeName="activeName"
      key="all"
    ></articles>
  </el-tab-pane>
  <el-tab-pane label="草稿箱" name="draft">
    <articles
      state="0"
      :showEdit="true"
      :showDelete="true"
      :showRestore="false"
      :activeName="activeName"
      key="draft"
    ></articles>
  </el-tab-pane>
  <el-tab-pane label="回收站" name="dustbin">
    <articles
      state="2"
      :showEdit="false"
      :showDelete="true"
      :showRestore="true"
      :activeName="activeName"
      key="dustbin"
    ></articles>
  </el-tab-pane>
</el-tabs>

google 了不少文章，但都是三种解决方案：
1.给每个组件加上单独的 key，上面的代码我就已经加了，但是并没有生效…
2.使用 watch，监听路由，这里我并没有使用路由
3.beforeRouteLeave，也要使用路由
这三种方法都没有解决我的问题，所以我决定自己解决

问题解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<el-tabs v-model="activeName" type="border-card" @tab-click="update ^= 1">
  <el-tab-pane label="已发布" name="all">
    <articles
      state="-2"
      :showEdit="true"
      :showDelete="true"
      :showRestore="false"
      :activeName="activeName"
      :update="update"
      key="all"
    ></articles>
  </el-tab-pane>
  <el-tab-pane label="草稿箱" name="draft">
    <articles
      state="0"
      :showEdit="true"
      :showDelete="true"
      :showRestore="false"
      :activeName="activeName"
      :update="update"
      key="draft"
    ></articles>
  </el-tab-pane>
  <el-tab-pane label="回收站" name="dustbin">
    <articles
      state="2"
      :showEdit="false"
      :showDelete="true"
      :showRestore="true"
      :activeName="activeName"
      :update="update"
      key="dustbin"
    ></articles>
  </el-tab-pane>
  <el-tab-pane label="博客配置" name="blogcfg">博客配置</el-tab-pane>
</el-tabs>
1
2
3
4
5
6
7
data() {
    return {
        activeName: 'all',
        update: 0
    }
},

1
2
3
4
5
6
7
// 子组件监听器
       watch: {
           update: function () {
               this.initArticle(this.currentPage, this.pageSize)
           }
       },

我在容器外部定义了一个变量 update 用来控制不同标签页下子组件的内容是否刷新，通过 el-tabs 的回调 tab-click 来使 update 的值发生变化，并在子组件 article 内设置一个监听器，用来监听父组件传来的属性 update 的变化。最终效果就是每当我点击一个标签页就会执行一次文章列表的初始化。