element-ui 某些组件绑定事件后不起作用

请看如下代码：

<template>
    <div>
        <el-col :span="8" @click="clickEvent">
            <div @click="clickEvent">

            </div>
        </el-col>
        <el-row gutter="14" @click="clickEvent">
          <el-col :span="14"></el-col>
        </el-row>
    </div>
</template>

<<script>
export default {
    name:EventDemo,
    data(){
        return{

        }
    },
    methods: {
        clickEvent:function(){

        }
    },
}
</script>

我们可以看到，在el-col、el-col内的div中和el-row上分别加了一个点击事件，但是在运行的时候只有div中的事件可以触发，其他两个点击事件无法触发，这是什么原因呢？

因为el-col和el-row是原生标签，所以加在上面的事件无法触发的，如果要触发该事件，需要在click后面加上.native,如下：

<template>
    <div>
        <el-col :span="8" @click.native="clickEvent">
            <div @click="clickEvent">

            </div>
        </el-col>
        <el-row gutter="14" @click.native="clickEvent">
          <el-col :span="14"></el-col>
        </el-row>
    </div>
</template>