个人理解，如果有误请指正。
在书《Vue.js 实战》一书中，作者先讲到了自定义事件这一知识点，然后使用$emit来做了一个举例，实现一个计数器效果。
代码如下：(非原书代码)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://vuejs.org/js/vue.js"></script>
<!--开发版vue-->
</head>
<body>
<div id="app">
<mycomp @total="totalcount"></mycomp>
<mycomp @total="totalcount"></mycomp>
<p>你一共点击了{{total}}次</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
components:{
mycomp:{
template:'<p @click="addcount">你点击了我{{num}}次</p>',
props:{
num:{
type:Number,
default:0
}
},
methods:{
addcount(){
this.num++;
this.$emit('total')
}
}
}
},
data:{
total:0
},
methods:{
totalcount(){
this.total++;
}
}
})
</script>
</body>
</html>
定义了一个mycomp组件，每个组件点击时调用addcount方法，让组件中的 num +1，然后通过$emit自定义了total事件，让每次点击组件时，让data中的total+1。
可能没那么难理解，但是书后面又加了一句话：
“除了用v-on在组件上监听自定义事件外，也可以监听DOM事件，这时可以用.native修饰符表示监听的是一个原生事件，监听该组件的跟元素”。
我表示百思不得其解（跟我基础不牢固有关）。
在通过反复尝试后，我发现了用.native来实现上述功能的写法：
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
<mycomp v-on:click.native="click"></mycomp>
<mycomp v-on:click.native="click"></mycomp>
你一共点击了{{total}}次
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
total:0
},
methods:{
click(){
this.total++;
}
},
components:{
mycomp:{
template:'<p v-on:click="numclick">你点击了我{{num}}次</p>',
props:{
num:{
type:Number,
default:0
}
},
methods:{
numclick(){
this.num++;
}
}
}
}
})
</script>
</body>
</html>
因为在自定义组件中，v-on:click的点击事件调用的是numclick方法，如果我们在html中使用了组件，那么在html中再添加点击事件，就会和组件中的点击事件冲突，并统一解析为一个点击事件。
但是要实现上面的效果，就需要在click后添加.native，告诉它我现在要调用跟元素的事件，添加完.native后，就可以正常调用跟元素中的numclick方法了。
网友评论