Remove native modification of the component click event from Vue2.0, vue2.0native

Remove native modification of the component click event from Vue2.0, vue2.0native

This is a problem encountered during component development. At that time, I was writing the 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>

The usage is like this:

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

According to Vue2.0 official documents about the parent-child component communication principle, the parent component transmits data to the child component through prop, and the child component triggers the event to the parent component. However, if the parent component wants to listen to its own click on the child component, the native modifier needs to be added, so it is written as above.

Well, the fault with Virgo is coming again. Common components such as button are abrupt if native is added. Although the component design has its own considerations, I want to remove the click native. The idea is as follows:

1. The child component listens to the click event from the parent component,
2. The sub-component processes the click Event internally and then sends the click Event externally:$emit("click".fn)

The transformed code is as follows (available for test ):

<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>

The parent component is used as follows:

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

As you can see, I am writing Vue2.0 functional components by referring to the IONIC2.X component API. Currently, I have only completed the following: ActionSheet, Button, Icon, Alert, and Toast. I can view the IONIC source code, while writing the ideas into the Vue code, it takes some time. Build your own component library and hope to develop it quickly in the future.

Now, the Project address is here. In the early stage, the implementation function is the main function. It is not recommended to use it in the production environment. Just read the code implementation idea and complete the Chinese remarks.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.