Vue жалуется, что не может найти дочерний компонент

Question

Я пытаюсь повторно использовать компонент app-address2 как дочерний элемент другого приложения app-delivery-creation2.

Сообщение об ошибке:

vue.js: 597 [Vue warn]: не удается найти элемент: # app-address2

это мой основной HTML-файл:

<div id="app-delivery-creation2">
    <delivery-creation2></delivery-creation2>
</div>

<script src="../assets/js/address.component2.js"></script>
<script src="../assets/js/delivery-creation.component2.js"></script>

а это составляющие

Vue.component('form-address2', {
    template: '<div>child component</div>'
})
var appAddress = new Vue({
    el : '#app-address2'
})

и

Vue.component('delivery-creation2', {
    template :
        '<div class="container">' +
        '       <div id="app-address2">' +
        '           <form-address2></form-address2>' +
        '       </div>' +
        '</div>'
})
var appDeliveryCreation = new Vue({
    el : '#app-delivery-creation2'
})

ВОПРОС: почему vue говорит, что не может найти элемент app-address2?

Большое спасибо

Answer 1

хорошо, моя проблема заключалась в том, что при каждом импорте файлов создавался новый родительский экземпляр vue, который сбивал с толку vue ...

подробнее здесь

это исправило проблему

основной файл HTML - импорт vue компонентов

<div id="app-delivery-creation2">
    <delivery-creation2></delivery-creation2>
</div>

<script src="../assets/js/address.component2.js"></script>
<script src="../assets/js/delivery-creation.component2.js"></script>

address.component2.js

Vue.component('form-address2', {
    template: '<div>child component</div>'
})

доставка-creation.component2.js

Vue.component('delivery-creation2', {
    template :
        '<div class="container">' +
        '           <form-address2></form-address2>' +
        '</div>'
})
var appDeliveryCreation = new Vue({
    el : '#app-delivery-creation2'
})

Answer 2

При выполнении:

var appAddress = new Vue({
    el : '#app-address2'
})

Элемент с идентификатором app-address2 должен уже уже находиться в DOM.

Но поскольку вы не объявляете элемент с таким элементом прямо на своей странице (как вы используете <div id="app-delivery-creation2">), он не будет работать. Обратите внимание, что вы объявляете его как часть шаблона другого компонента:

Vue.component('delivery-creation2', {
    template :
        '<div class="container">' +
        '       <div id="app-address2">' +
        '           <form-address2></form-address2>' +
        '       </div>' +
        '</div>'
})

Это означает, что <div id="app-address2"> будет только в DOM после , когда этот код выполняется:

var appDeliveryCreation = new Vue({
    el : '#app-delivery-creation2'
})

Поскольку <div id="app-delivery-creation2"> использует <delivery-creation2>, при использовании он "добавит" в DOM <div id="app-address2">.

Другими словами, чтобы ваш код работал, вы должны запускать var appAddress = new Vue({ только после бита var appDeliveryCreation = new Vue({, например:

var appDeliveryCreation = new Vue({
    el : '#app-delivery-creation2'
})
var appAddress = new Vue({
    el : '#app-address2'
})

Хотя это может сработать, это похоже на какую-то сумасшедшую идею, похожую на начало. FWIW, вы, вероятно, хотите заняться чем-то другим.