javascript - vue 全局組件為什么不能跟vue實例分開到不同的文件中？
問題描述
global.js文件:var app;app = new Vue({ el: '#app', data: {value: 'hello world', }});login.js
Vue.component(’login’, { template: ’<h1>login</h1>’})index.html
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Daemon</title> <script src='http://www.cgvv.com.cn/wenda/js/jquery-3.2.1.js' charset='UTF-8'></script> <script src='http://www.cgvv.com.cn/wenda/js/semantic.min.js' charset='UTF-8'></script> <script src='http://www.cgvv.com.cn/wenda/js/vue.js' charset='UTF-8'></script> <link rel='stylesheet' href='http://www.cgvv.com.cn/wenda/css/semantic.min.css'></head><body> <p id='app'><p class='ui container'> <p class='ui pider'></p> <p class='ui blue button'>{{value}} </p> <login></login></p> </p> <script src='http://www.cgvv.com.cn/wenda/js/global.js' charset='UTF-8'></script> <script src='http://www.cgvv.com.cn/wenda/js/login.js' charset='UTF-8'></script></body></html>
結(jié)果報錯:[Vue warn]: Unknown custom element: <login> - did you register the component correctly? For recursive components, make sure to provide the 'name' option.(found in <Root>)
哪位大俠能為小白指點下？
問題解答
回答1：html中我做了一下修改，調(diào)整了js引入的順序，因為需要在保證app根組件渲染的時候，其中用到的組件已經(jīng)聲明注冊。
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Daemon</title> <script src='http://www.cgvv.com.cn/wenda/js/jquery-3.2.1.js' charset='UTF-8'></script> <script src='http://www.cgvv.com.cn/wenda/js/semantic.min.js' charset='UTF-8'></script> <script src='http://www.cgvv.com.cn/wenda/js/vue.js' charset='UTF-8'></script> <link rel='stylesheet' href='http://www.cgvv.com.cn/wenda/css/semantic.min.css'></head><body> <p id='app'><p class='ui container'> <p class='ui pider'></p> <p class='ui blue button'>{{value}} </p> <login></login></p> </p> <script src='http://www.cgvv.com.cn/wenda/js/login.js' charset='UTF-8'></script> <script src='http://www.cgvv.com.cn/wenda/js/global.js' charset='UTF-8'></script></body></html>回答2：
全局API系列都必須在實例化之前申明
相關(guān)文章：
1. javascript - 有適合開發(fā)手機端Html5網(wǎng)頁小游戲的前端框架嗎？2. javascript - arguments.callee3. javascript - js setTimeout在雙重for循環(huán)中如何使用？4. java - 線上應(yīng)用，如果數(shù)據(jù)庫操作失敗的話應(yīng)該如何處理？5. atom開始輸入！然后按tab只有空格出現(xiàn)沒有html格式出現(xiàn)6. node.js - 阿里云ECS，阿里云Docker，還有Leancloud的LeanEgine，哪個更適合NodeJs WebApp？7. java - 創(chuàng)建maven項目失敗了 求解決方法8. mac里的docker如何命令行開啟呢？9. mysql - 這種分級一對多，且分級不平衡的模型該怎么設(shè)計表？10. mysql - linux連接數(shù)據(jù)庫報錯
網(wǎng)公網(wǎng)安備