简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Warum können globale Vue-Komponenten und Vue-Instanzen nicht in verschiedene Dateien aufgeteilt werden?
typecho
typecho 2017-07-05 10:42:57
0
2
1081

global.js-Datei:

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>

Das Ergebnis ist ein Fehler: [Vue-Warnung]: Unbekanntes benutzerdefiniertes Element: <login> – Haben Sie die Komponente korrekt registriert? Stellen Sie sicher, dass Sie die Option „Name“ angeben.
(gefunden in <Root> )

Welcher Held kann Xiaobai einen Rat geben?

typecho
typecho

Following the voice in heart.

Antworte allen(2)
習慣沉默
習慣沉默2017-07-05 10:44:57 2 Etage

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>
Wie +0
Antwort hinzufügen
漂亮男人
漂亮男人2017-07-05 10:44:57 1 Etage

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！