vue 组件间的通信,报错

组件间的通信,报错"ReferenceError: tip is not defined"

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

建议再看一下文档,组件的作用域那一块

props: ['tip']应该写在var tipTemplate={}中,而不是写在 new Vue({})中,组件的作用域弄错了

楼上的解答有问题,组件要动态属性绑定:

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

整体如下:

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

在子组件上加一个v-if="tip"

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题