recherche

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

javascript - Communication entre les composants Vue, rapport d'erreurs

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>
黄舟黄舟2775 Il y a quelques jours591

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

  • 我想大声告诉你

    我想大声告诉你2017-05-18 10:53:45

    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

    répondre
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-18 10:53:45

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

    .

    répondre
    0
  • 我想大声告诉你

    我想大声告诉你2017-05-18 10:53:45

    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>

    répondre
    0
  • 天蓬老师

    天蓬老师2017-05-18 10:53:45

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

    répondre
    0
  • Annulerrépondre