关于vue双向数据绑定实践（element-ui）

项目有一个优化需求，原项目截图如下：

这是一个输入框，因为业务关系，被放到了表格里边，导致整个输入框很小，输入数据时很不方便。

所以我想的一个优化方案是，当点击这个输入框时，会弹出一个更大的输入框，用户可在这个弹出框里输入数据，然后再把这个弹出框的内容传回这个小输入框。
具体效果如下：

点击编辑按钮之后，弹出如下框：

点击确定后，弹窗里的内容同步到小框框里。
具体实现方法：
小框框添加一个点击事件，点击之后打开弹窗：openDialog()

这个弹窗使用el-dialog组件，里面存的是一个form表单，表单绑定一个对象，具体代码如下：

<el-dialog title="请输入数据源" :visible.sync="ifView">
    <el-form v-model='inputObject'>
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="inputObject.data"></el-input>
    </el-form > 
    <div slot="footer">
        <el-button @click="cancel()" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirm()" size="mini">确 定</el-button>
    </div>
 </el-dialog>

这样，输入的内容就会绑定到inputObject的data属性上，但是如何把这个值传到原来的输入框上呢，请教了一下我的导师，他说，只需要把原输入框的对象，赋值给inputObject就可以了，这里需要注意的是原输入框的内容是绑定在rows对象的data属性上的。
具体实现如下：

openDialog(rows){
     this.ifView = true;
     this.inputObject = rows;
  },

这样，根据vue的双向数据绑定，rows上的data属性会跟inputData上的data属性变化。
原理如下：
vue具有双向数据绑定的特性，所以，在弹窗上输入值之后，inputObject上的data属性会相应改变，因为el-input绑定的值是inputObject.data，那么为什么rows.data也会相应跟着改变呢，原因就是对象是引用类型， this.inputObject = rows; 这句语句只是把rows的引用赋值给inputObject，如下图：
所以当修改inputObject里的data值，rows里的data值也会相应改变。

今天被导师嫌弃技术不好，难受，接下来要努力学习and工作了！！！