如何对 el-slider 的 v-model 更新数据时做额外工作？

Posted 2023-05-08 Himmelbleu

v-model 可以通过修饰符做一些更新数据时的前置或后置工作，但是对于 Element 这样的三方封装好的组件，我们不可能对其再封装一个自定义的修饰符来达到标题所说的目标。

v-model 要的是一个响应式数据，Vue 计算属性 computed 可以返回一个继承于 Ref 的 WritableComputedRef 接口类型，即一个 Ref 类型的响应式数据。

Vue 计算属性 computed 函数可以传入一个 getter 和 setter，通过这两个拦截器可以切入我们任何额外的工作。也就是说我们可以通过计算属性对 el-slider 的 v-model 做更新数据时的额外工作的目标。

const computeCabinetWidth = computed(
  get() 
    return localSetting.value.cabinet.width;
  ,
  set(value) 
    disabled.value = inspect();
    localSetting.value.cabinet.width = value;
    LiteConfig.eleHtml.style.setProperty(LiteCssVars.cabinetWidth, value + "rem");
  
);

const computeContentWidth = computed(
  get() 
    return localSetting.value.content.width;
  ,
  set(value) 
    disabled.value = inspect();
    localSetting.value.content.width = value;
    LiteConfig.eleHtml.style.setProperty(LiteCssVars.contentWidth, value + "vw");
  
);

<el-collapse-item title="宽度设置">
  <div class="mb-4">
    <div class="mb-2">设置陈列柜宽度</div>
    <el-slider :min="13" :step="0.5" :max="20" v-model="computeCabinetWidth" size="small" />
  </div>
  <div>
    <div class="mb-2">设置中间内容宽度</div>
    <el-slider :disabled="disabled" :min="50" :step="1" :max="60" v-model="computeContentWidth" size="small" />
  </div>
</el-collapse-item>
</el-collapse>

关于vue3中v-model做了哪些升级

参考技术A 发生变化：

在input中使用

在组件中使用

如果我们想将 prop 或事件名称更改为不同的名称，我们需要向组件添加一个model选项，如：

v-model在这种情况下，就相当于：

某些情况下，我们需要实现对组件属性的双向绑定。例如我们在上面这个ChildComponent中，通过某一事件的触发（如点击某一按钮）从而向父组件传达分配新值

父组件侦听该事件并更新本地数据：

简写为以下形式：

在 3.x 版本中，组件上使用 v-model相当于传递了一个 modelValue 属性以及触发一个 update:modelValue 事件

如果要改变绑定的属性名，我们可以将参数传递给v-model

如果我们想在子组件中用input绑定传递过来的数据，并做实时修改那该怎么操作呢？
首先我们不能直接绑定传递过来数据，哪怕绑定了也无法做到实时修改，父组件传递了那就是传递了你如何都影响不到我当前组件的实际数据。而且一般在项目中我们都不会直接对props数据进行绑定修改。我们可以利用个中间值数据去操作，如：

另外，它可以进行多个绑定：