父子通信
html
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<button @click="ccc = true">打開</button>
<child v-show='ccc' @close="ccc=false"></child>
</div>
js
Vue.component('child',{
template:`
<div>我是兒子<button @click="$emit('close')">關(guān)閉</button></div>
`
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
ccc:false
}
})
兒子沒有辦法自己關(guān)閉自己疏咐，需要告訴父親担扑，由父親進(jìn)行關(guān)閉琴许。
兄弟通信
爺孫通信
vue的爺孫通信特別麻煩，所以有了vuex晾浴。
孫子沒有冒泡
不存在的负乡，只能父子通信，如果你想爺孫通信脊凰，就傳遞事件吧抖棘，一層一層的傳上來。
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<button @click="ccc = true">打開</button>
<child :visiable="ccc" @close="ccc=false"></child>
</div>
Vue.component('child',{
props:['visiable'],
template:`
<div v-show="visiable" @click="$emit('close')">我是老二<sunzi></div>
`
})
Vue.component('sunzi',{
template:`
<div>我是老三<button @click="$emit('close')">關(guān)閉</button></div>
`
})
new Vue({
el: '#app',
data: {
message: '我是老大',
ccc:false
}
})
