App.vue
<SchoolCom @sendNameEvent="receiveSchoolName" @click.native="clickSchoolCom"></SchoolCom>
export default {
...
methods:{
receiveSchoolName: function(name){
console.log("APP收到学校名字:", name);
},
clickSchoolCom: function(){
console.log("点击了SchoolCom组件!")
}
}
}
</script>
SchoolCom.vue
<template>
<div class="demo">
<h1>学校名字:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
<button @click="sendSchoolName">给APP发送学校名字</button><br>
<button @click="unbind">解绑sendNameEvent自定义事件</button><br>
<button @click="destoryVC">销毁当前SchoolCom组件实例(vc)</button>
</div>
</template>
export default {
...
methods:{
sendSchoolName: function(){
this.$emit("sendNameEvent", this.name);
},
unbind: function(){
this.$off("sendNameEvent");
},
destoryVC: function(){
this.$destroy();
}
}
}