组件的自定义事件

父子组件通信

子组件给父组件传递数据，有以下两种方式：

第一种：通过props

父组件向子组件传递一个函数型的props，子组件通过props调用这个在父组件中定义的函数来传递数据，如下。

第二种：通过自定义事件

1. 写法：父组件内自定义事件，子组件内触发这个事件并传递数据，如下。
   

2. 写法：父组件内定义监听事件，子组件内触发这个事件并传递数据，如下。
   

组件绑定自定义事件

看下面具体例子。

• 父组件 App。

<template>
    <div class="app">
        <!-- <Company @demo="getCompanyName"/> -->
        <Company v-on:demo="getCompanyName"/>
        <Employee :getEmployeeName="getEmployeeName"/>
    </div>
</template>

<script>
import Company from "./components/Company.vue";
import Employee from "./components/Employee.vue";

export default {
    methods:{
        getEmployeeName(name){
            console.log("父组件获取员工姓名：",name);
        },
        getCompanyName(name){
            console.log("父组件获取公司名称：",name);
        }
    },
    components:{
        Company,
        Employee
    }
}
</script>

<style>
.app{
    background: gray;
    padding: 5px;
}
</style>

• 子组件：Company和Employee。

<template>
    <div class="app">
        <!-- <Company @demo="getCompanyName"/> -->
        <!-- <Company v-on:demo="getCompanyName"/> -->
        <Company ref="company"/>
        <Employee :getEmployeeName="getEmployeeName"/>
    </div>
</template>

<script>
import Company from "./components/Company.vue";
import Employee from "./components/Employee.vue";

export default {
    methods:{
        getEmployeeName(name){
            console.log("父组件获取员工姓名：",name);
        },
        getCompanyName(name){
            console.log("父组件获取公司名称：",name);
        }
    },
    mounted(){
      this.$refs.company.$on("demo",this.getCompanyName);  
    },
    components:{
        Company,
        Employee
    }
}
</script>

<style>
.app{
    background: gray;
    padding: 5px;
}
</style>

<template>
  <div class="employee">
      <h2>员工姓名：{{name}}</h2>
      <h2>员工年龄：{{age}}</h2>
      <button @click="sendEmployeeName">点我获取员工姓名</button>
  </div>
</template>

<script>
export default {
    name:"Employee",
    data(){
        return {
            name:"张三",
            age:25
        }
    },
    props:["getEmployeeName"],
    methods:{
        sendEmployeeName(){
            console.log("子组件发送员工姓名：",this.name);
            this.getEmployeeName(this.name);
        }
    }
}
</script>

<style scoped>
.employee{
    background: skyblue;
    background-clip: content-box;
    padding: 10px;
}
</style>

组件解绑自定义事件

组件解绑自定义事件有以下两种方法：
第一种：$off()，接收一个字符串或者一个字符串数组，数组用于批量解绑。
第二种：$destroy()，vm实例调用$destroy方法或者vc实例调用$destroy方法。

• 父组件：App

<template>
    <div class="app">
        <Company v-on:demo="getCompanyName"/>
        <Employee :getEmployeeName="getEmployeeName"/>
        <button class="btn" @click="destroy">点我销毁vm实例</button>
    </div>
</template>

<script>
import Company from "./components/Company.vue";
import Employee from "./components/Employee.vue";

export default {
    methods:{
        getEmployeeName(name){
            console.log("获取员工姓名：",name);
        },
        getCompanyName(name){
            console.log("获取公司名称：",name);
        },
        destroy(){
            this.$destroy();
        }
    },
    components:{
        Company,
        Employee
    }
}


</script>

<style>
.app{
    background: gray;
    padding: 5px;
}
.btn{
    margin-left:10px;
    line-height: 30px;
    background: ivory;
    border-radius: 5px;
}
</style>

• 子组件：Company和Employee。

<template>
  <div class="company">
      <h2>公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
      <button @click="sendCompanyName">点我获取公司名称</button>
      <button @click="unbind">点我解绑事件</button>
      <button @click="destroy">点我销毁vc实例</button>
  </div>
</template>

<script>
export default {
    name:"Company",
    data(){
        return {
            name:"五哈技术有限公司",
            address:"上海宝山"
        }
    },
    methods:{
        sendCompanyName(){
            this.$emit("demo",this.name);
        },
        unbind(){
            this.$off();
        },
        destroy(){
            this.$destroy();
        }
    }

}    
</script>

<style scoped>
.company{
    background: orange;
    background-clip: content-box;
    padding: 10px;
}
</style>

<template>
  <div class="employee">
      <h2>员工姓名：{{name}}</h2>
      <h2>员工年龄：{{age}}</h2>
      <button @click="sendEmployeeName">点我获取员工姓名</button>
  </div>
</template>

<script>
export default {
    name:"Employee",
    data(){
        return {
            name:"张三",
            age:25
        }
    },
    props:["getEmployeeName"],
    methods:{
        sendEmployeeName(){
            this.getEmployeeName(this.name);
        }
    }
}

</script>

<style scoped>
.employee{
    background: skyblue;
    background-clip: content-box;
    padding: 10px;
}
</style>

注意！，$destroy()只能解绑自定义事件，不能解绑内置事件，因此，vm实例调用$destroy方法后，button元素上绑定的click事件依然存在。

组件绑定原生事件

组件绑定原生事件，如@click.native。

• 父组件：App

<template>
    <div class="app">
        <h2>{{msg}}</h2>
        <Company @click.native="show"/>
    </div>
</template>

<script>
import Company from "./components/Company.vue";

export default {
    data(){
        return {
            msg:"技术是用来解决问题的，不能解决问题的技术将毫无价值！"
        }
    },
    methods:{
        show(){
            alert(this.msg);
        }
    },
    components:{
        Company
    }
}


</script>

<style>
.app{
    background: gray;
    padding: 5px;
}
.btn{
    margin-left:10px;
    line-height: 30px;
    background: ivory;
    border-radius: 5px;
}
</style>

• 子组件：Company

<template>
  <div class="company">
      <h2>公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    name:"Company",
    data(){
        return {
            name:"五哈技术有限公司",
            address:"上海宝山"
        }
    }

}    
</script>

<style scoped>
.company{
    background: orange;
    background-clip: content-box;
    padding: 10px;
}
</style>

另，这篇文章也曾介绍过自定义事件。