Vue.js Vue抱怨找不到子组件

我试图将一个组件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'
})

<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说它找不到元素app-address2

非常感谢您执行以下操作：

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

id为app-address2的元素必须已经在DOM中

但是，由于您没有在页面中直接声明一个元素，因此它不会起作用。请注意，您正在将其声明为另一个组件的模板的一部分：

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

因为使用了，当使用时，将附加到DOM

换句话说，要使代码正常工作，必须让var appAddress=new Vue{仅在var appDeliveryCreation=new Vue{位之后运行，如：

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

---

虽然它可能会起作用，但这似乎是一个疯狂的类似于《盗梦空间》的想法。FWIW，您可能想做其他事情。

好的，我的问题是每次文件导入都会创建一个新的vue父实例，这让vue感到困惑

更多细节

这解决了问题

主HTML文件-导入vue组件

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

<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>'
})

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

delivery-creation.component2.js

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

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

为什么要将appAddress作为变量？