简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Why can't vue global components and vue instances be separated into different files?
typecho
typecho 2017-07-05 10:42:57
0
2
1085

global.js file:

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>

Result error: [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> ;)

Which hero can give some advice to Xiaobai?

typecho
typecho

Following the voice in heart.

reply all(2)
習慣沉默
習慣沉默2017-07-05 10:44:57 2 floor

I made some modifications in the HTML and adjusted the order of js introduction, because it is necessary to ensure that when the app root component is rendered, the components used in it have been declared and registered. 

<!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>
Like +0
Add Reply
漂亮男人
漂亮男人2017-07-05 10:44:57 1 floor

Global API series must be declared before instantiation

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！