（三）vue父子组件通信（二）

w_t_y_y

已于 2022-04-11 16:08:13 修改

阅读量183

点赞数 1

分类专栏： VUE js 文章标签： vue

于 2021-05-19 15:57:22 首次发布

本文链接：https://blog.csdn.net/w_t_y_y/article/details/117032729

版权

本文详细探讨了Vue中父子组件通信的注意事项，包括避免直接修改props、使用data或computed属性代替、子组件数据更新问题及解决方法，如watch、强制刷新子组件以及使用事件总线$bus进行组件间的通信。同时，文章通过实例展示了如何在不同场景下正确处理父子组件的数据同步和组件状态刷新。

摘要由CSDN通过智能技术生成

父子组件通信注意事项：

一、单向传递问题：子组件一般不修改props中的数据

1、先看报错：

如果直接在子组件中修改props中的属性值，f12会有报错：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result" (found in component )

2、改进：即子组件中最好不要修改props中的属性的值（如val），如果需要修改，可以单独在data中定义一个本地属性copyVal，在子组件初始化时候把val赋值给copyVal，之后只操作copyVal。

例1：现有项目列表，可新增、修改项目，新增、修改都是弹框，弹框页中有一项用了子组件

<td style="text-align:left">
                <AddFile
           
                  ref="addFile"
                  @addFile="addFile"
                  @changeServiceContext = "changeServiceContext"
                  :fileList="projectFileList"
                  :height="projectHeight"
                  :updateDisable="updateDisable"
                  :serviceContext = "project.serviceContext"
                ></AddFile>
              </td>
 
 
 
changeServiceContext(serviceContext) {
      this.project.serviceContext = serviceContext;
    },

子：这里用context作为中间媒介传值，（不过我也奇怪为什么这里直接操作fileList，f12没有看到报错。。。）

<!-- @format -->
 
<template>
  <div>
    <div class="files" style="float:left">
      <Scroll :height="height" v-if="fileList.length >0">
        <div v-for="(item, index) in fileList" :key="index" class="fileItem">
          <span class="filename" :title="item.fileName" @click="downloadFile(item.fileDownloadUrl)">{
  { item.fileName }}</span>
          <a
            href="javascript:void(0);"
            rel="external nofollow"
            @click="deleteFile(item)"
            class="delete"
            v-if="!updateDisable"
          >X</a>
        </div>
      </Scroll>
    </div>
    <div class="filearea">
      <div class="fileleft">
     <el-input v-model="context" class="selectandinput" :disabled="updateDisable" 
      @keyup.native="serviceContextChange($event)" size="mini" 
      ></el-input></div>
    <div class="fileright"><label class="button text-overflow" for="addFile" v-if="!updateDisable">
      
      <i  class="el-icon-upload avatar-uploader-icon" type="primary"></i>
    </label>
    </div>
   
    <input
     
      ref="addFile"
      @change="fileHandler()"
      type="file"
      id="addFile"
      style="position:absolute;clip:rect(0 0 0 0);"
      multiple
      accept=".png, .jpeg, .jpg, application/pdf, .txt, .xls, .xlsx, .pptx, .pps, .ppsx"
    /></div>
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'AddFile',
  data() {
    return {
      context: ''
    };
  },
  props: {
    file