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

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

1 голос
/ 20 марта 2020

Имея файл 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 вверх, они также будут отлично отрисовываться.

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

1 Ответ

3 голосов
/ 20 марта 2020

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

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

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

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

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