为什么这个vue组件不渲染

Question

我已经用头撞墙了 3 个小时了。这个最简单的可能组件不会渲染：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    app
    <container></container>
</div>

<script type="text/x-template" id="container-template">
<div class="container">
    container
    {{this.foo}}
</div>
</script>

<script>
const app = new Vue({
    el: "#app",
    data: {foo:"bar"},
    created: function(){
        console.log("app created")
    },
});

Vue.component('container', {
    template: '#container-template',
    data: function(){
        return {foo:"bar"}
    },
    created: function(){
        console.log("container created")
    },
});
</script>

使用Unknown custom element: <container> 运行 sn-p 错误。但是将 x-template 放入 #app 也无济于事。

Answer 1

您在创建“应用程序”时正在使用容器组件，但容器组件尚未注册。只需切换语句，它就会起作用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    app
    <container></container>
</div>

<script type="text/x-template" id="container-template">
<div class="container">
    container
    {{this.foo}}
</div>
</script>

<script>
Vue.component('container', {
    template: '#container-template',
    data: function(){
        return {foo:"bar"}
    },
    created: function(){
        console.log("container created")
    },
});

const app = new Vue({
    el: "#app",
    data: {foo:"bar"},
    created: function(){
        console.log("app created")
    },
});

</script>