vuex☞组件之间的监听

情景:

关闭弹窗后,父组件中输入框自动获取焦点。


eg
  • 解决一:直接将el-dialog写在父组件中,就不存在父子关系,这样在关闭前,直接让输入框获取焦点。
  • 缺点:代码清新度不高,不够模块化,假如存在多个dialog,所有代码扔一块,不方便管理维护。

优化方案:

  • 解决二:将dialog抽取出来,作为单一的模块,掌管自己的逻辑。
  • 缺点:假如涉及到比较多的数据交互,对于状态的管理会增加业务量。
  • 优点:代码清晰度高,分模块管理。
    具体步骤:①使用vuex保存状态,在el-dialog before-close之前发送获取焦点指令
    ②在父组件中,监听这个状态值(状态值改变时候就执行获取焦点的方法)。关于如何获取焦点可以参考前面的文章elementUI el-input focus

貌似狠简单的样子,不就是vuex,操作状态的改变么?呵呵

代码片段

//子组件

   ......
   methods: {
      ...mapActions([
        'setInputFocus',
      ]),
     
      // dialog  关闭之前
      removeData() {
        this.setInputFocus(new Date())  //这个才是关键中的关键
      },
  }
//父组件中
 computed: {
      ...mapState([
        'inputSubFocus',
      ]),
    },
 watch: {
      'inputSubFocus': 'needFocus'
    },
methods:{
 needFocus() {
        this.$refs.xxx.$el.querySelector('input').focus();
      },
}
state
export default {
  inputSubFocus: '',
}
actions。。。略过

你可能感兴趣的:(vuex☞组件之间的监听)