在做組態編輯工具的時候，有一個需求，就是使用者在輸入完input之後，如果想清除掉input框裡面的內容，這個時候試圖仍然是空的，會導致不好的效果，想清空之後還保持原來的數值

分析：

其實這個時候，雖然將input框裡面的內容清除掉了，但是實際上資料還是沒有變化，正是因為沒有變化觸發更新，所以試圖也仍然是沒有變化的，這個時候需要做的就是想辦法讓試圖更新過來

解決辦法：

在元件的上面新增一個key欄位，子元件修改資料的時候更新這一個key欄位，key更新了，元件就會因此重新整理了

但是這樣又萌生出了一個新的問題，因為我的頁面的一個元件去更新父級元件的資料，這種中間因為多個vue引用，有可能是兩層，也有可能是三層甚至多層才能找到最終的這個父級元件，這樣改動起來就很大，

那麼怎麼辦呢？

這個時候就想到了一個解決辦法，用到了elementui 裡面的emmiter.js 提供的dispatch函式，這個函式的作用就是可以向上遞迴不斷查詢到指定的元件，不管多少層，根據名字找到元件為止

找到之後呢，這個時候就可以emit了

注意：

rightBar元件裡面一定要寫上name，componentName欄位名字，不然不會觸發的喲

name: 'RightBar',
componentName:'RightBar',

再在raightBar的mouonted裡面寫上一個事件

mounted(){
        this.$on('changeKey',(val)=>{
            console.log(
 
'子元件觸發上來了')
            this.key++
        })
    }

然後就可以用上這個key了

<el-form label-width="80px" size="mini" :model="formModel" ref="form1" >
      <component :key="paramType+key" :is="paramType" />
</el-form>

完美解決