自定义组件是通过整合HTML页面元素，为实现某些特定应用场景而整合到一起的，其中自定义组件可以像普通元素一样，通过绑定事件的方式来触发相应页面操作。

事件的命名

与组件命名和prop的命名方式不同，事件名不存在任何自动化的大小写转换，触发的事件名需要完全匹配监听这个事件所用的名称，Vue推荐始终使用 kebab-case (短横线隔开式) 的事件名。

//自定义事件
this.$emit('my-event')
//组件的自定义事件
<my-component @my-event="doSomething"></my-component>

事件的触发流程

• 创建组件：

<template>
    <button @click="countMethod">You clicked me {{ count }} times.</button>
</template>
<script>
export default {
  name: 'MyComponent',
  props：{
    count:{
      type:Number,
      default:0
  	}
  },
  methods:{
    countMethod(){
      this.$emit('my-event')
    }
  }
}
</script>

• 组件应用：

<template>
     //使用自定义组件
    <my-component :count="countValue" @my-event="updateCount"></my-component>
</template>
<script>
export default {
  data(){
    return{
      countValue: 0
    }
  },
  methods:{
    updateCount(){
      countValue++
    }
  }
}
</script>

组件的自定义事件也是基于基础页面元素的事件来绑定实现的,其中触发流程如下:

1. input页面元素click事件绑定countMethod方法
2. 在countMethod方法内触发自定义事件my-event
3. 父级的my-event事件绑定updateCount方法,方法内部进行countValue的加法运算
4. 而countValue通过prop的形式传递到组件内部count
5. 子级页面元素通过prop更新count数据

基于自定义事件和.sync修饰符进行prop的"双向绑定"

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。前面已经讲过，组件的prop是单向绑定的，父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

如何实现prop的“双向绑定”？

我们推荐以 update:myPropName 的模式，通过触发事件的方式实现prop的“双向绑定”。

<template>
    <button @click="countMethod"></button>
     <li>You clicked {{ count }} times.</li>
</template>
<script>
export default {
  name: 'MyComponent',
  props：{
    count:{
      type:Number,
      default:0
  	}
  },
  methods:{
    countMethod(){
      var newCount = count + 1
      this.$emit('update:count',newCount)
    }
  }
}
</script>

<template>
     //prop的“双向绑定”
    <my-component :count.sync="countValue"></my-component>
</template>

注意：带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”countValue + 1” 是无效的)。

总结

自定义组件可以通过自定义事件的方式实现事件的关联与页面元素的触发操作，

也可以通过自定义事件的方式实现prop的“双向绑定”