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='https://www.haobala.com/wenda/js/jquery-3.2.1.js' charset='UTF-8'></script> <script src='https://www.haobala.com/wenda/js/semantic.min.js' charset='UTF-8'></script> <script src='https://www.haobala.com/wenda/js/vue.js' charset='UTF-8'></script> <link rel='stylesheet' href='https://www.haobala.com/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='https://www.haobala.com/wenda/js/global.js' charset='UTF-8'></script> <script src='https://www.haobala.com/wenda/js/login.js' charset='UTF-8'></script></body></html>
结果报错:[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中我做了一下修改，调整了js引入的顺序，因为需要在保证app根组件渲染的时候，其中用到的组件已经声明注册。
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Daemon</title> <script src='https://www.haobala.com/wenda/js/jquery-3.2.1.js' charset='UTF-8'></script> <script src='https://www.haobala.com/wenda/js/semantic.min.js' charset='UTF-8'></script> <script src='https://www.haobala.com/wenda/js/vue.js' charset='UTF-8'></script> <link rel='stylesheet' href='https://www.haobala.com/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='https://www.haobala.com/wenda/js/login.js' charset='UTF-8'></script> <script src='https://www.haobala.com/wenda/js/global.js' charset='UTF-8'></script></body></html>回答2：
全局API系列都必须在实例化之前申明
相关文章：
1. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）2. javascript - 微信小程序 wx.downloadFile下载文件大小有限制吗3. javascript - iview 打包之后 找不到自带的icon图片，而且路径重复，点解4. Thinkphp 下载地址找不到了？5. angular.js - angularjs的自定义过滤器如何给文字加颜色？6. 计算机专业，未毕业，自己买了一套Java视频看，打算花两个月时间，到时出去找份实习的，算是自己自学吗？7. Python 中如何对单个字典中同一个 key 的值进行合并？8. html5 - vue-cli 装好了 新建项目的好了，找不到项目是怎么回事？9. python 中对redis 操作采用装饰器进行处理，怎么做10. javascript - 责任具体在哪一方
网公网安备