recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Pourquoi les composants globaux et les instances de Vue ne peuvent-ils pas être séparés dans des fichiers différents?

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 ?

typechotypecho2784 Il y a quelques jours1136

répondre à tous(2)je répondrai

  • 習慣沉默

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

    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>

    répondre
    0
  • 漂亮男人

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

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

    répondre
    0
  • Annulerrépondre