关键词
- 自定义事件(子组件触发自定义事件$emit)、
- 原生事件（子组件的原生事件、父组件的原生事件 @click.native ）
一、自定义事件
1、自定义事件
父组件中给组件所绑定事件 @click="事件方法名" ，事件绑定为 自定义事件
试一下吧：事实上，自定义事件在 Vue 实例中执行事件没有弹出窗的视图效果出现
2、如何触发自定义事件？
子组件若要触发父组件绑定的事件，需要子组件对 template 的dom元素绑定一个 原生事件。当在子组件点击时，methods上调用this.$emit('自定义事件名') 去触发自定义事件，父组件中已监听该自定义事件
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
// 原生事件的绑定
template: '<div @click="handleChildClick">miya</div>',
methods: {
handleChildClick: function() {
this.$emit('click') //触发自定义事件
}
}
})
var vm = new Vue({
el: "#root",
methods: {
handleClick: function() {
alert("click") //注意括号里要双引号
}
}
})
</script>
</body>试一下吧，看看弹窗出来打印的是什么
二、原生事件
原生事件的监听分两种情况：
1、子组件的原生事件
解决：在子组件里对 template 的dom元素绑定原生事件，methods上执行原生事件，然后触发父组件上的自定义事件
Vue.component('child',{
template: '<div @click="handleChildClick">miya</div>',
methods: {
handleChildClick: function() {
alert("child click") // 触发原生事件
}
}
})试一下吧，弹出弹窗。页面效果只对子组件的原生事件有效
2、父组件的原生事件
（1）需求：在页面模板上直接监听子组件的原生事件
（2）解决：在组件上做事件监听 @click.native="xxx" 监听的并不是自定义事件，是原生的点击事件
<body>
<div id="root">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child',{
template: '<div>miya</div>',
})
var vm = new Vue({
el: "#root",
methods: {
handleClick: function() {
alert("click") //注意括号里要双引号
}
}
})
</script>
</body>试一下吧，仅仅只是加了native 这个方法，竟然就可以通过父组件打印出来
3075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
