ElementUI el-switch开关在消息框Messagebox确认后再作修改

业务场景

有这么一个开关，在点击时不即时作出变化，而是弹出一个消息弹窗，进行Confirm后再决定是否改变其绑定的值。
before:

Click

case “确定”:

源码分析

在组件点击时触发该事件，即若组件未disabled则执行handleChange方法

再看到handleChange这个方法，首先是获取修改后的绑定值，然后向父组件emit input和change事件。
as we all know，该组件是使用v-moel绑定checked的值的。

回顾v-model

在 Vue 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件：

在父子组件中使用

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

在原生input中双向绑定值

<input v-model="searchText">

<!-- 是以下的简写: -->

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

使用 v-bind.sync
在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此，我们建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，我们可以通过下面的方式将分配新 value 的意图传达给父级：

this.$emit('update:title', newValue)

如果需要的话，父级可以监听该事件并更新本地 data property。例如：

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

<ChildComponent