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