搜索

首页  >  问答  >  正文

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="./js/jquery-3.2.1.js" charset="UTF-8"></script>
    <script src="./js/semantic.min.js" charset="UTF-8"></script>
    <script src="./js/vue.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="./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="./js/global.js" charset="UTF-8"></script>
    <script src="./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>)

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

typechotypecho2728 天前1111

全部回复(2)我来回复

  • 習慣沉默

    習慣沉默2017-07-05 10:44:57

    html中我做了一下修改,调整了js引入的顺序,因为需要在保证app根组件渲染的时候,其中用到的组件已经声明注册。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Daemon</title>
        <script src="./js/jquery-3.2.1.js" charset="UTF-8"></script>
        <script src="./js/semantic.min.js" charset="UTF-8"></script>
        <script src="./js/vue.js" charset="UTF-8"></script>
        <link rel="stylesheet" href="./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="./js/login.js" charset="UTF-8"></script>
        <script src="./js/global.js" charset="UTF-8"></script>
    </body>
    </html>

    回复
    0
  • 漂亮男人

    漂亮男人2017-07-05 10:44:57

    全局API系列都必须在实例化之前申明

    回复
    0
  • 取消回复