为什么这个 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>运行代码段错误Unknown custom element: <container> 。 但是，将 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>