vue 回调赋值？

Question

vue问个问题啊，点击修改弹出这个框，当我点击确定之后怎么改变下边那个原来的值呢

原来框框的代码是

<el-table-column prop="value" label="参数值" min-width="27%" sortable>
         <template slot-scope="scope">
           <el-autocomplete  popper-class="my-autocomplete" 
         size="small" v-model.trim="scope.row.value" 
         :value="scope.row.value" :fetch-suggestions="querySearch"                placeholder="请输入参数值" @select="((item)=>{handleSelect(item, index)})">
             <i class="el-icon-edit el-input__icon" style="cursor: pointer;" slot="suffix" @click="handleIconClick(scope.$index, scope.row)"></i>
             <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
             </template>
           </el-autocomplete>
         </template>
</el-table-column>

下边这个是弹出框的代码

            <el-dialog title="mock" :visible.sync="updateParameterForm" :close-on-click-modal="false">
                <el-form :model="updateNumber" label-width="60px" :rules="FormRules" ref="updateNumber" >
                    <el-form-item label="参数名" prop="name" label-width="83px" style="display:none;">
                        <el-input size="small" v-model.trim="updateNumber.name" auto-complete="off" placeholder="请输入参数名称"></el-input>
                    </el-form-item>
                    <template prop="name">
                        <el-input type="textarea"  v-model.trim="updateNumber.value" auto-complete="off" 
                          :rows="5"    placeholder="请输入参数值"></el-input>         
                    </template>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click.native="updateParameterForm = false">取消</el-button>
                    <el-button plain size="small" type="primary" @click.native="updateParameter">确定</el-button>
                </div>
            </el-dialog>

这个是点击确定后的代码

updateParameter: function () {
                
                this.$refs.updateNumber.validate((valid) => {
                    if (valid) {
                        this.form.parameter[this.id] = this.updateNumber;
                        //form.parameter 是data数据
                        this.form.parameter[this.id.value]=this.updateNumber[this.value];
                       
                     
                        this.updateParameterForm = false
                    }
                })
            },

Answer 1

可以使用vuex，来检测这个值的变化；或者子组件向父组件通讯可以使用vue.$emit

Answer 2

还是菜啊，来自大佬的指点：
第一：点击确定的时候让这个组件发出一个事件，内容携带在事件里，
弹出框的时候动态监听这个组件的事件，事件处理方法中对指定内容进行更新。
第二：使用vuex，点击确定的时候发起Action改变State值，列表中的内容使用mapState和计算属性监听

Answer 3

state () {
    
    editDialog: {
        visable: false,
        currentIndex: null,
        inputText: ''
    }
}

点击表格中修改图标的时候，改变editDialog中inputText的值为当前表格中的值，并记录当前点击表格的index。
点击el-dialog中的确认按钮的时候，先校验->调用后端接口->将inputText的值赋给tableData[index]。

Answer 4

可以了解下 $emit