Vue:替换/合并现有的特性

假设这是 bs-date-input 的模板:

<input type="date" class="form-control">

为了给该日期选择器插件增加一个特殊的主题,我们可能需要增加一个特殊的 class,比如:

<bs-date-input
data-3d-date-picker="true"
class="date-picker-theme-dark"
></bs-date-input>

在这个例子当中,我们定义了两个不同的 class 值:

  • form-control,来自组件自身的模板
  • date-picker-theme-dark,来自父组件

对于多数特性来说,传递给组件的值会覆盖组件本身设定的值。即例如传递 type="large"将会覆盖 type="date" 且有可能破坏该组件!所幸我们对待 class 和 style 特性会更聪明一些,这两个特性的值都会做合并 (merge) 操作,让最终生成的值为:form-control date-picker-theme-dark

总结:就是vue可以将两个class合并在一起,这样就解决了两个class会覆盖掉一个的问题

原文地址:https://www.cnblogs.com/qjuly/p/8795962.html