Vue中的native修飾符解析

native修飾符

通常來講，vue自己提供了v-on:eventName這個語法來提供vue的時事件綁定，一般使用@eventName這個語法糖代替上述語法。

使用過程當中沒有考慮@eventName做用標籤的類型，由於通常將該語法用在html原生標籤，在組件標籤上使用的時候，出現了@click="handler"沒法觸發handler事件。

如下爲事故現場：

<my-component @click="handler"><my-component/>

使用該組件的vue實例 注：handler( )爲ES6語法，等同於handler:function( )

methods:{
        handler(){
            console.log('click me');
        }
    }

通過面向搜索編程(百度) 發現默認@eventName使用在組件上是表示綁定了組件自定義eventName 要綁定原生DOM事件，須要使用.native來修飾@eventName，即 @eventName.native 語法

那麼自定義事件又是怎麼一肥事呢？

通常來講，自定義事件用於Vue自定義組件，用於內部DOM元素事件響應時，開放給組件外部的API。

specially，他須要組件內部使用$emit('defineEventName',value)這個方法來觸發，這也代表了一開始個人錯誤想法，覺得是觸發組件內部的原生DOM的click方法，這裏指明瞭使用@evnetName做用在組件上，不會觸發原生DOM事件，即一開始的無反應。

這裏完成了一個@click="handler",而不是用native修飾符的例子，基於Vue自定義事件

my-component組件內部實現

<template>
        <button @click="in">click me</button>
    </template>

methods:{
        in(){
            this.$emit('click')
        }
    }

這個例子在點擊按鈕click me以後可以經過$emit('click')觸發組件自定義的click事件以調用使用該組件上的Vue實例上的handler方法，打印出click me。

<font color="#ff0000">在組件上想要觸發@click事件，組件內部須要有一個能夠觸發原生click事件的元素，而且這個原生click事件綁定一個用於提交emit('click')到組件上的@click函數</font>