Detailed explanation of the native modification of Vue2.0 to remove component click events

This is a problem encountered in component development. At that time, I was writing a button component, and the template was like this:

<template>
 <button class="disable-hover button ion-button"
     :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
  <span class="button-inner">
   <slot></slot>
  </span>
  <div class="button-effect"></div>
 </button>
</template>

Use it like this:

<ion-button @="primary()" color="primary">primary</ion-button>

According to the principle of Vue2.0 official document on parent-child component communication, the parent component passes data to the child component through prop, and the child component triggers an event to the parent component. However, if the parent component wants to listen to its own click on the child component, it needs to add a native modifier, so the writing method is like the above.

Well, Virgo's problem is coming again. Commonly used components like buttons feel abrupt if native is added. Although component design has its own considerations, I want to remove click native, and the idea is as follows:

1. The child component listens to the click event given by the parent component.
2. The child component handles the click event internally and then sends the click event outward:$emit("click".fn)

The modified code is as follows (you can use it for personal testing):

<template>
 <button class="disable-hover button ion-button" @click="_click"
     :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
  <span class="button-inner">
   <slot></slot>
  </span>
  <div class="button-effect"></div>
 </button>
</template>

<script type="text/babel">
export default{
  ....
  ....
  methods: {
   _click: function () {
    this.$emit('click', function () {
     alert('inner')
    })
   }
  }
}
</script>

Used in the parent component as follows:

<ion-button @click="primary()" color="primary">primary</ion-button>

Perhaps readers can see that the component API I am referring to write the functional components of Vue2.0, and currently only complete: ActionSheet, Button, Icon, Alert, Toast. While looking at the IONIC source code, I summarize the ideas into Vue code, which means taking some time. Accumulate your own component library and hope to develop it faster in the future.

Project nowaddressHere, the early stage is mainly based on the implementation functions, and it is not recommended to use them in the production environment. Just read the code to implement the implementation ideas, and all the Chinese notes are done.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.