Question

我正在尝试将组件app-address2重用为另一个名为app-delivery-creation2的子组件。

错误讯息：

vue.js：597 [Vue警告]：找不到元素：＃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

执行时：

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>，因此在使用时，<div id="app-address2">将“追加”到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，您可能想要做其他事情。

Answer 2

好吧，我的问题是每个文件导入都在创建一个让vue混淆的新的vue父实例......

更多详情here

这解决了问题

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

Vue抱怨它无法找到儿童成分

2 个答案: