子组件滑动菜单WeiSwitch无法实时更新状态的问题

在开发项目中，有一个需求，就是滑动菜单switch，分启用和已禁用两个开关，在点击这个switch时，会出现一个弹窗，提示用户，是否确定切换开关，如果点击确定，那就切换，如果取消，那就重新返回之前的状态。

如上图所示，点击了switch，switch按钮变成启用状态，如果点击确定，即启用状态，如果点击取消，变回之前已禁用状态。

  <wei-switch class="wei-switch" :value="switchValue" :FId="FId" :index="index" :handle="true"  @changeSwitch="changeSwitch(scope.$index,scope.row,$event)"></wei-switch>

在使用过程中发现，一开始，假设赋值switchValue为false,在changeSwitch()中，我是这样写的：

    changeSwitch (index, row, value) {
      var switchText = value ? '启用' : '禁用'
      this.$confirm(
        `此操作将${switchText} xxxxxx, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
            // 确定按钮
            // 逻辑事件处理......
            this.$message({
              type: 'success',
              message: value ? '已启用' : '已禁用'
            })
          })
      }).catch(() => {
        // 取消按钮
        this.switchValue =!value
        console.log("switchValue",this.switchValue)
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

在changeSwitch()中，value是当前switch的状态值，所以第一次点击switch时，其状态和值已经改变了，所以在点击取消按钮时，重新将赋值之前的就可以了，所以使用了this.switchValue =!value,但是却出现了一个问题，点击第一次，不会及时更新状态，但是第二次又可以了，接着第三次又不行，第四次又可以了。如下图所示：

如上图所示，按理来说，正确的状态应该是，每次switchValue重新赋值，都会走WeiSwitch组件里面的watch方法才对，但是打印log发现，事实并非如此。问题出在哪里呢？其实主要还是对vue没有更深刻的理解，我们知道，vue视图是数去驱动的父组件数据发生变化，动态传递给子组件，子组件实时刷新视图。关键点就在父组件数据发生变化，是的，没错，父组件数据发生变化，重新整理下思路，就会发现，第一次点击弹窗的取消按钮时，当this.switchValue=!value时，其值并没有发生改变！！！还是初始化值false。所以，为了达到需求，就需要让switchValue发生改变，那样才能走到WeiSwitch组件里面的监听方法watch，所以需要这样子处理，只需在changeSwitch()最开始的地方加上这样一行代码this.switchValue=value,这样就能达到父组件数据发生变化的效果。

    changeSwitch (index, row, value) {
      //将改变父组件的数据，已达到点击取消时，赋值发生改变，调用到子组件里的watch方法。
      this.switchValue=value
      var switchText = value ? '启用' : '禁用'
      this.$confirm(
        `此操作将${switchText} xxxxxx, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
            // 确定按钮
            // 逻辑事件处理......
            this.$message({
              type: 'success',
              message: value ? '已启用' : '已禁用'
            })
          })
      }).catch(() => {
        // 取消按钮
        this.switchValue =!value
        console.log("switchValue",this.switchValue)
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },