- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Kommunikation zwischen Komponenten, Fehler „ReferenceError: Spitze ist nicht definiert“
<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>
我想大声告诉你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>建议再看一下文档，组件的作用域那一块
过去多啦不再A梦2017-05-18 10:53:45
props: ['tip']应该写在var tipTemplate={}中，而不是写在 new Vue({})中，组件的作用域弄错了
我想大声告诉你2017-05-18 10:53:45
楼上的解答有问题，组件要动态属性绑定：
<my-tip :tip="tip"></my-tip>整体如下：
<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>