简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Pourquoi les composants globaux et les instances de Vue ne peuvent-ils pas être séparés dans des fichiers différents?
typecho
typecho 2017-07-05 10:42:57
0
2
1082

fichier 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>

Le résultat est une erreur : [Vue warn] : Élément personnalisé inconnu : <login> - avez-vous enregistré le composant correctement ? Pour les composants récursifs, assurez-vous de fournir l'option "name".
(trouvée dans <Root> )

Quel héros peut donner des conseils à Xiaobai ?

typecho
typecho

Following the voice in heart.

répondre à tous(2)
習慣沉默
習慣沉默2017-07-05 10:44:57 2 plancher

J'ai apporté quelques modifications au HTML et ajusté l'ordre d'introduction de js, car il est nécessaire de s'assurer que les composants utilisés ont été déclarés et enregistrés lors du rendu du composant racine de l'application. 

<!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>
Comme +0
Ajouter une réponse
漂亮男人
漂亮男人2017-07-05 10:44:57 1 plancher

Les séries d'API globales doivent être déclarées avant l'instanciation

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！