[JavaScript知识库]Vue自定义事件

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();
        }
    }
}