Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

vue子组件数据影响父组件数据的问题

### 问题描述
第一次在社区提问题,如有不妥,还请包涵。

在项目中遇到的一个问题。可能涉及到element-ui。现在有主组件m,子组件c,el-table组件t和el-form组件f。

我将回传到m的数据展示在t中,又以slot的形式通过data传给c,将c的数据展现到f中(就是一个修改功能)。本身是个很简单的逻辑,可我发现在我修改f的数据的时候,m的表格数据也会跟着改变,这实在是蒙了圈,说实话完全没有解决思路。

### 问题出现的环境背景及自己尝试过哪些方法
总之先试着排除了一下全局数据的问题。该项目是没有用到任何全局数据的,也没用到vuex。试了下把.sync换了个变量修饰,没被修饰到的变量并没有发生这种情况。

### 相关代码

主组件:

<el-table :data="tableData">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="id"></el-table-column>
<el-table-column prop="code" label="容器编号"></el-table-column>
<el-table-column prop="warehouseCode" label="仓库编码"></el-table-column>
...
<el-table-column label="操作">
 <template slot-scope="scope">
 <el-button size="mini"
 type="text"
 icon="el-icon-edit"
 @click="handleUpdate(scope.row)"
 >编辑
 </el-button>
 ...
 <itemCRUDDialog :show.sync="diaOpen" :title="title"
 :switch="switch1" :diaForm="diaForm"
 :containerType="containerType" />
 ...
 handleUpdate(row) {
  this.diaForm = row
  this.switch1 = true
 this.title = '修改容器'
 this.diaOpen = true
}


子组件:

<el-dialog
 :title="title"
 :visible.sync="visible"
 width="700px"
 append-to-body
 @close="$emit('update:show', false)"
>
 <el-form ref="diaForm" :title="title" :model="diaForm" :rules="rules" label-width="100px">
 <el-row :gutter="20">
 <el-col :span="12">
 <el-form-item label="增加数量(个)" prop="quantity">
 <el-input v-model="diaForm.quantity" placeholder="请选择增加数量(个)">
 </el-input>
 </el-form-item> 
 </el-col>
 </el-row>
 </el-form>
 ...
 <script>
 export default{
    name: 'itemCRUDDialog',
 props:{
      show:{
        type:Boolean,
 default:false
 },
 switch:{
        type:Boolean,
 default:false
 },
 diaForm: {
        type:Object,
 default:{}
      },
 title: {
        type:String,
 default:''
 },
 containerType:{
        type:Array,
 default:[]
      }
    },
 watch:{
      show(){
        this.visible = this.show
 if (!this.switch){
          this.diaForm = {}
        }
      }
    },
 data() {
      return {
        visible: this.show
        title:''
 }
}
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

因为你修改的和主组件里的是同一个对象
JSON.stringify再parse一下再传
或者传的时候{...diaForm}
还有你子组件watch里直接修改了props的diaform没报错么。。
还有一个如果想props默认值为{} 得写成()=>({}) 顺便说下数组写()=>[] 对象加括号是应为不加就是一个空的函数了


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...