6、自定义事件

自定义事件是指我们常常需要在子组件调用父组件的方法。由于通过标签属性进行传递，建议使用短横线（-）连接，那么从而使用emit进行触发的时候，仍然使用的是短横线的名称。
示例：

反例

//父组件
<product-item @productChangeStatus="changeStatus"></product-item>
<script>
  export default {
    methods: {
      changeStatus(product) {
        product.status = !product.status;
      }
    }
  }
</script>
//子组件
<template>
  <div class="product-item" @click="change(product)">.....</div>
</template>
<script>
  export default {
    methods: {
      change(product) {
        this.$emit("productChangeStatus",product)
      }
    }
  }
</script>

正例

//父组件
<product-item @product-change-status="changeStatus"></product-item>
<script>
  export default {
    methods: {
      changeStatus(product) {
        product.status = !product.status;
      }
    }
  }
</script>
//子组件
<template>
  <div class="product-item" @click="change(product)">.....</div>
</template>
<script>
  export default {
    methods: {
      change(product) {
        this.$emit("product-change-status",product)
      }
    }
  }
</script>