vue中的.native修飾符

如果你想在某個組件的根元素上綁定事件，直接使用 @click=''function' 是不生效的，我們可以添加.native修飾符 @click.native=''function''，請看以下demo:

實現的功能是點擊 <a-com></a-com>的時候打印 1 

1.父組件：

<template>
    <div>
        首頁
        組件A:<a-com @click='warpClick'></a-com>
    </div>
</template>

<script>
    import aCom from '../components/comA.vue'
    export default{
        components:{
            'a-com':aCom
        },
        methods:{
            warpClick(){
                console.log(1);
            }
        }
    }
</script>

<style>
</style>

2.子組件：

<template>
    <div class="box-a">
        組件A的內容
    </div>
</template>

<script>
</script>

<style>
    .box-a{
        height: 100px;
        width: 300px;
        background: lavender;
    }
</style>

結果：控制台無打印

此時修改 為 <a-com @click.native='warpClick'></a-com>

控制台打印結果：

當然，在實際項目中也會遇到類似的問題，項目中遇到了iview插件庫的側邊導航欄的點擊問題，點擊每一個option的時候綁定的click事件不生效，代碼如下：

<template>
    <div>
        <Menu active-name="1-2" :open-names="['1']">
        <Submenu name="1">
            <template slot="title"><Icon type="ios-analytics" />Navigation One</template>
               <MenuItem name="1-1" @click='itemClick'>Option 1</MenuItem>
               <MenuItem name="1-2">Option 2</MenuItem>
               <MenuItem name="1-3">Option 3</MenuItem>
               <MenuItem name="1-4">Option 4</MenuItem>
        </Submenu>
       
    </Menu>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                 theme2: 'light'
            }
        },
        methods:{
            itemClick(){
                console.log(1);
            }
        }
    }
</script>

<style>
</style>

此時控制台沒有打印結果：

修改每一項的option代碼為： <MenuItem name="1-1" @click.native='itemClick'>Option 1</MenuItem>

此時控制台打印結果：1