Question

我正在尝试了解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的经验，这个问题听起来可能很愚蠢，但是请记住，我对此完全没有经验：）

Answer 1

来自Vue.js official documentation

HTML属性名称不区分大小写，因此浏览器会将所有大写字符解释为小写。这意味着，当您使用in-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（不大写）。

Answer 2

为什么我可以将其称为我的组件内部的passedVariable（驼峰式而不是用分隔符分隔），即使它以passed-Variable的形式传递给组件

因为html几乎立即消失了：

一旦运行（或什至是*.vue文件/其他预编译的情况下，）就会尽快将（html-）模板转换为renderFunction（= javascript），它必须遵循js命名约定； js名称中不允许使用-。

因此，关于如何映射html“名称”和js“名称”存在约定。

关于将变量传递给组件的有趣问题

索引

host.vue

2 个答案: