javascript - vue 全域元件為什麼不能跟vue實例分開到不同的檔案?
typecho
typecho 2017-07-05 10:42:57
0
2
1110

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.#e#(found inlt; ;)

哪位大俠能為小白指點下?

typecho
typecho

Following the voice in heart.

全部回覆(2)
習慣沉默

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>
漂亮男人

全域API系列都必須在實例化之前申明

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板