qq_41767905
dreamer·强
采纳率20%
2019-02-26 14:25

vue父组件夏多个子组件,子组件分别修改后其他子组件如何同步更新数据?

10

现在有一个课程为父组件,下面分别有
详情,教师,文件库,章节课时
等子组件。
我获取到课程数据之后父子组建传值给子组件,子组件中数据更新之后其他子组件里面数据依旧是原来数据,

比如我在课时中需要获取到文件库的数据,但是如果先在文件库组件里添加了文件,切换到章节课时 组件中获取的还是原来的组件

我该怎么做?

代码:

父组件:

<el-tab-pane label="默认计划设置" name="默认计划设置" :style="contnetn_height">
        <el-tabs
          type="border-card"
          :value="setupIndex"
          tab-position="left"
          class="corse-tabs-info"
          :style="contnetn_height"
          @tab-click="setupTab"
        >
          <el-tab-pane label="基础信息" name="基础信息" :style="contnetn_height">
            <setup :setupData="setupDatas"></setup>
          </el-tab-pane>
          <el-tab-pane label="详细信息" name="详细信息" :style="contnetn_height">
            <details-setup :setupData="setupDatas"></details-setup>
          </el-tab-pane>
          <el-tab-pane label="课程大纲" name="课程大纲" :style="contnetn_height">
            <chapter :chapterInfo="chapterInfo"></chapter>
            <!-- <tree :courseData="courseDatas" v-show="courseDatas"></tree> -->
          </el-tab-pane>
          <el-tab-pane label="教师管理" name="教师管理" :style="contnetn_height">
            <teachers :teacherData="teacherList"></teachers>
          </el-tab-pane>
          <el-tab-pane label="学员管理" name="学员管理" :style="contnetn_height">
            <student :studentData="studentData"></student>
          </el-tab-pane>
          <el-tab-pane label="试卷批阅" name="试卷批阅" :style="contnetn_height"></el-tab-pane>
          <el-tab-pane label="作业批阅" name="作业批阅" :style="contnetn_height"></el-tab-pane>
          <el-tab-pane label="数据预览" name="数据预览" :style="contnetn_height"></el-tab-pane>
          <el-tab-pane label="订单统计" name="订单统计" :style="contnetn_height"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>

子组件

获取到父组件数据

props: {
    teacherData: { type: Object }
  },

-------------------补充-------------
然后子组件向父组件传值

this.$emit('success',false);
<el-tab-pane label="课程文件" name="课程文件" :style="contnetn_height">
        <file @success="getCourse"></file>
      </el-tab-pane>

父组件中的值也更新了,但是其他子组件的值没有变化

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • black_night_raid black_night_raid 2年前

    试试vuex,先功能实现吧

    点赞 评论 复制链接分享
  • u014794644 瓦史托德 2年前

    你修改了其中一个tab 对其他有影响的tab xxxData没更新?

    点赞 评论 复制链接分享
  • m0_37672168 铁打的老二 2年前

    不知道你说的数据未更新的子组件跟数据更新的子组件是父子关系还是兄弟关系,没法给出具体解决方案

    点赞 评论 复制链接分享
  • baidu_33552969 下一个喵呜 2年前

    vue一般是不允许子组建修改父组建的值的,vuex用不惯的话,可以试试父组建传递一个修改该值的方法给子组件,在子组件中调用就行

    点赞 评论 复制链接分享

相关推荐