您的位置：首页技术文章
文章详情页

javascript - vue 全局组件为什么不能跟vue实例分开到不同的文件中？

浏览：175日期：2023-03-30 17:11:03

问题描述

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系列都必须在实例化之前申明

标签： JavaScript
上一条：javascript - 清空Chrome缓存的疑问下一条：javascript - 点击一个li显示里面div内容，点击下一个li显示下一个li里面div内容，并隐藏前一个li所显示的内容，js代码如何写？
相关文章：
1. docker镜像push报错2. docker start -a dockername 老是卡住，什么情况？3. macos - mac下docker如何设置代理4. docker images显示的镜像过多，狗眼被亮瞎了，怎么办？5. dockerfile - 为什么docker容器启动不了？6. nignx - docker内nginx 80端口被占用7. 关于docker下的nginx压力测试8. debian - docker依赖的aufs-tools源码哪里可以找到啊？9. docker-machine添加一个已有的docker主机问题10. docker内创建jenkins访问另一个容器下的服务器问题
排行榜
macos - mac下docker如何设置代理
macos - mac下docker如何设置代理
1. docker安装后出现Cannot connect to the Docker daemon.
2. 关于docker下的nginx压力测试
3. nignx - docker内nginx 80端口被占用
4. docker镜像push报错
5. docker-machine添加一个已有的docker主机问题
6. debian - docker依赖的aufs-tools源码哪里可以找到啊？
7. dockerfile - 为什么docker容器启动不了？
8. docker start -a dockername 老是卡住，什么情况？
9. docker images显示的镜像过多，狗眼被亮瞎了，怎么办？
10. docker内创建jenkins访问另一个容器下的服务器问题
热门标签