文章目录
一 事件名
建议统一使用下划线命名
对象 | 命名方式 | 调用方式 |
---|---|---|
组件名 | 局部注册无法使用短横线分隔法 | 驼峰转为短横线分隔调用 |
prop名 | 只能使用驼峰法 | 转为短横线分隔调用 |
事件名 | 因为v-on 不识别大小写,所以使用短横线分隔法 |
直接调用 |
二 调用事件复习
v-on:
简写为@,在组件中通过$emit('事件名')
,在标签中即可通过@事件名
来监听事件
下例子中,组件中要监听的事件是click
,我们也可以定义为其他事件。
var vm = new Vue({
el: '#components-demo',
data: {
num: 100
},
methods: {
haha:function(){
console.log("haha")
}
},
components:{
my_button:{
template:'<button v-on:click="$emit(`haha_button`)">调用haha</button>'
}
}
})
<div id="components-demo">
<button