如何使用 Jeykll 防止 Vue 组件的属性名称小写或小写转换答案

【问题标题】：How to Prevent downcase or lowercase conversion of attribute names for a Vue component with Jeykll如何使用 Jeykll 防止 Vue 组件的属性名称小写或小写转换
【发布时间】：2019-06-11 16:59:53
【问题描述】：

我在 Jekyll 项目中使用 Vue 组件 vue-carousel。除了通过属性进行控制之外，一切都在工作，因为组件需要驼峰式大小写，但 Jekyll 将属性转换为小写。所以我的代码：

<carousel
  :perPage="1"
  :navigationEnabled="true"
  :navigationNextLabel="'❯'"
  :navigationPrevLabel="'❮'"
  :paginationEnabled="false"
  class="gr__carousel">

  {% for slide in include.content.slides %}
    {% include slide.html %}
  {% endfor %}
</carousel>

使用属性生成：

<div 
  class="VueCarousel gr__carousel" 
  perpage="1" 
  navigationenabled="true" 
  navigationnextlabel="❯" 
  navigationprevlabel="❮">
...
</div>

Why Jekyll convert my Capital words into lowercase in Categories 的一个解决方案

本来是要编辑 Jekyll gem，但如果可能的话，我想避免这种情况。对于这种情况还有其他解决方法吗？

【问题讨论】：

如果你改用 kebab-case 会发生什么？
行得通！我刚刚注意到 Vue 在控制台中提示了这一点：'Prop“navigationprevlabel”被传递给组件，但声明的 prop 名称是“navigationPrevLabel”。请注意，HTML 属性不区分大小写，并且在使用 in-DOM 模板时，camelCased 道具需要使用它们的 kebab-case 等效项。您可能应该使用“navigation-prev-label”而不是“navigationPrevLabel”。'
kebob 外壳与驼峰属性连接是 Vue 的功能还是其他什么？

标签： javascript ruby vue.js jekyll

【解决方案1】：

Vue 允许用于传递 props 的属性使用 camelCase 或 kebab-case。因此，如果 Jekyll 导致 :perPage 出现问题，您可以改用 :per-page。

https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended

Vue 会在创建组件实例时规范化这些 prop 名称，因此它们始终可以在实例上使用 camelCase 访问。所以不管你怎么通过都是this.perPage。

我不是 100% 确定，但我认为转换是在 normalizeProps 中完成的：

https://github.com/vuejs/vue/blob/3819af5c9dedde4d1ea81f9caa127e611c8752e3/src/core/util/options.js#L294

【讨论】：