Komunikasi antara komponen, ralat "ReferenceError: tip tidak ditakrifkan"
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Adalah disyorkan untuk membaca dokumen sekali lagi dan melihat skop komponen
props: ['tip'] hendaklah ditulis dalam var tipTemplate={} dan bukannya Vue({}) baharu Skop komponen adalah salah
).Ada masalah dengan jawapan di atas Komponen memerlukan pengikatan sifat dinamik:
Keseluruhannya adalah seperti berikut:
Tambah v-if="tip"
pada komponen anak