关于input清空之后组件试图不更新解决办法 emmiter.js dispatch使用

在做组态编辑工具的时候，有一个需求，就是用户在输入完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>

完美解决