猿问

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

结果报错:[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>)

哪位大侠能为小白指点下?


子衿沉夜
浏览 487回答 1
1回答

手掌心

html中我做了一下修改,调整了js引入的顺序,因为需要在保证app根组件渲染的时候,其中用到的组件已经声明注册。<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Daemon</title>&nbsp; &nbsp; <script src="./js/jquery-3.2.1.js" charset="UTF-8"></script>&nbsp; &nbsp; <script src="./js/semantic.min.js" charset="UTF-8"></script>&nbsp; &nbsp; <script src="./js/vue.js" charset="UTF-8"></script>&nbsp; &nbsp; <link rel="stylesheet" href="./css/semantic.min.css"></head><body>&nbsp; &nbsp; <div id="app">&nbsp; &nbsp; &nbsp; &nbsp; <div class="ui container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="ui divider"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="ui blue button">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{value}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <login></login>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <script src="./js/login.js" charset="UTF-8"></script>&nbsp; &nbsp; <script src="./js/global.js" charset="UTF-8"></script></body></html>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答