Любопытный вопрос о передаче переменных в компоненты

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

Почему я могу сослаться на него как значение параметра visibleVariable (регистр верблюдов, а не разделенный разделителями) внутри моего компонента, даже если он передается компоненту как переменная аргумента

Потому что html исчез почти сразу:

Как только это запустится (или даже раньше, в случае *.vue файлов / другой предварительной компиляции), шаблон (html-) преобразуется в renderFunction (= javascript) где он должен придерживаться правил именования js;- не допускается в именах js.

Таким образом, существует соглашение о том, как отображаются html "имена" и js "имена".

Answer 2

Из Официальная документация Vue.js

Имена атрибутов HTML не чувствительны к регистру, поэтому браузеры будут интерпретировать любые заглавные буквы как строчные.Это означает, что при использовании встроенных в DOM шаблонов имена верблюдов в CamelCase должны использовать их эквиваленты в кебабе (разделенные дефисом):

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 (без прописных букв).