Vue Компоненты одного файла, как смонтировать несколько?

Question

Имея файл index.js, подобный этому:

new Vue({
    el: '#app',
    components: {
        'hello': Hello,
        'counter': Counter,
        'goodbye': GoodBye
    }
});

И файл index.html, подобный этому:

<div id="app">
    <Counter />
    <Goodbye />
    <Hello />
</div>

Отображается только первый элемент внутри #app.

Как есть, Counter показывает нормально. Если я прыгаю Goodbye или Hello вверх, они также будут отлично отрисовываться.

Я, очевидно, хотел бы, чтобы все они отображались. Что я делаю не так?

Answer 1

HTML Не поддерживает закрытие тегов с помощью />, его ошибки изменяются, так как тег не закрыт.

Это означает, что ваша структура выглядит следующим образом для браузера (отметьте элементы с javascript отключенными ):

<div id="app">
    <Counter>
        <Goodbye>
            <Hello>
            </Hello>
        </Goodbye>
    </Counter>
</div>

Это, конечно, не сработает, нам нужно обновить индекс. html до:

<div id="app">
    <Counter></Counter>
    <Goodbye></Goodbye>
    <Hello></Hello>
</div>