console
let tip = {
template: '<h1> tip !!!</h1>'
}
let div1 = {
template: '<div><a @click="open">open tip</a><a @click="close">close tip</a></div>',
methods: {
open() {
this.$root.$emit('open')
},
close() {
this.$root.$emit('close')
}
}
}
Vue.component('tip', tip)
Vue.component('div1', div1)
let app = new Vue({
template: '<div><tip v-show="show"/><div><div1/></div></div>',
data() {
return {
show: false
}
},
methods: {
open() {
this.show = true
},
close() {
this.show = false
}
},
created() {
this.$on('open', function(){
this.open()
})
this.$on('close',function(){
this.close()
})
}
}).$mount('#app')
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<div id="app"></div>