请看如下代码：
<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>
