关于将变量传递给组件的好奇问题答案

【问题标题】：Curious question about passing variables to components关于将变量传递给组件的好奇问题
【发布时间】：2019-07-05 08:30:23
【问题描述】：

我正在尝试了解 vue.js 的基础知识，而这件事让我很困惑。我有一个名为host 的组件，它传递了一个名为passed-Variable 的变量。为什么我可以在我的组件中将它称为passedVariable（驼峰式而不是分隔符分隔），即使它以passed-Variable 的形式传递给组件？

这是一个澄清的代码示例：

索引

<div id="app">
    <host :passed-Variable="'test'"></host>
</div>

host.vue

<template>
    <span>
        {{ passedVariable }}  
    </span>
</template>

<script>
    export default {
        props: [
            'passedVariable'
        ]
    }
</script>

如果您对 vue 有经验，这个问题可能听起来很愚蠢，但请记住，我完全没有这方面的经验 :)

【问题讨论】：

参考文档中的part about prop casing。

标签： html vue.js vue-component

【解决方案1】：

来自Vue.js official documentation

HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写。这意味着当您使用 DOM 内模板时，camelCased 道具名称需要使用其 kebab 大小写（连字符分隔）等效项：

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

此外，在您的示例中：passed-Variable 应该是 passed-variable（没有大写）。

【讨论】：

【解决方案2】：

为什么我可以在我的组件中将它称为passedVariable（骆驼大小写而不是分隔符分隔），即使它作为passed-Variable传递给组件

因为 html 几乎立即消失了：

一旦运行（或者在*.vue 文件/其他预编译的情况下更早），（html-）模板将转换为必须遵守 js 命名约定的 renderFunction(= javascript)； - 不允许在 js 名称中使用。

所以关于html“名称”和js“名称”如何映射有这个约定。

【讨论】：