communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Communication entre les composants Vue, rapport d'erreurs
黄舟
黄舟 2017-05-18 10:51:45
0
4
588

Communication entre composants, erreur "ReferenceError: tip is not definition"

    <body>
        <p id="app">
            <button v-on:click="tip = !tip">Toggle</button>
            <my-tip></my-tip>
        </p>
    </body>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript">
        var tipTemplate = {
          template: '<transition name="fade">\
                        <p v-if="tip" class="vertical-horizontal-center">\
                            <img src="../image/no-log.png">\
                            <h2>暂无记录</h2>\
                            <p class="aui-btn aui-btn-info">重新加载</p>\
                        </p>\
                    </transition>'
        }
        new Vue({
            el: "#app",
            data: {
                tip: false,
            },
            components: {
                'my-tip': tipTemplate,
                props: ['tip'],
            },
            created: function() {}
        })
    </script>
黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

répondre à tous(4)
我想大声告诉你
我想大声告诉你2017-05-18 10:53:45 4 plancher 
var tipTemplate = {
          template: '<transition name="fade">\
                        <p v-if="tip" class="vertical-horizontal-center">\
                            <img src="../image/no-log.png">\
                            <h2>暂无记录</h2>\
                            <p class="aui-btn aui-btn-info">重新加载</p>\
                        </p>\
                    </transition>',
           props: ['tip']
        }
<my-tip tip="tip"></my-tip>

Il est recommandé de relire le document et de voir la portée du composant

Comme +0
Ajouter une réponse
过去多啦不再A梦
过去多啦不再A梦2017-05-18 10:53:45 3 plancher

props : ['tip'] doit être écrit dans var tipTemplate={} au lieu de new Vue({}). La portée du composant est erronée

.
Comme +0
Ajouter une réponse
我想大声告诉你
我想大声告诉你2017-05-18 10:53:45 2 plancher

Il y a un problème avec la réponse ci-dessus. Les composants nécessitent une liaison d'attribut dynamique : 

<my-tip :tip="tip"></my-tip>

Le tout est le suivant :

    <body>
        <p id="app">
            <button v-on:click="tip = !tip">Toggle</button>
            <my-tip :tip="tip"></my-tip>
        </p>
    </body>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript">
        Vue.component('simple-counter', {
          template: '<transition name="fade">\
                        <p v-if="tip" class="vertical-horizontal-center">\
                            <img src="../image/no-log.png">\
                            <h2>暂无记录</h2>\
                            <p class="aui-btn aui-btn-info">重新加载</p>\
                        </p>\
                    </transition>',
          props: ['tip']
        })
        
        new Vue({
          el: '#app',
          data: {
              tip: false
          },
          created: function() {}
        })
    </script>
Comme +0
Ajouter une réponse
Peter_Zhu
Peter_Zhu2017-05-18 10:53:45 1 plancher

Ajoutez un v-if="tip" au composant enfant

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