vue组件绑定原生事件?正常情况下我们想给一个组件绑定事件需要这样来写,首先需要通过$emit向上触发事件,然后监听事件,最后才会执行方法函数,比如下面这样的:
- <div id="root">
- <child @click="handleClick"></child>
- </div>
- <script>
- Vue.component('child',{
- template: '<div @click="handleChildClick">child</div>',
- methods: {
- handleChildClick: function () {
- this.$emit('click')
- }
- }
- })
- var vm = new Vue({
- el: '#root',
- methods: {
- handleClick: function () {
- alert('handleClick方法')
- }
- }
- })
- </script>
然后点击组件就会执行 alert('handleClick方法')
,但是发现没,这样的话很麻烦,那么有没有更简单的执行方法呢?有的,就是这样,添加一个.native修饰符
,如下:
- <div id="root">
- <child @click.native="handleClick"></child>
- </div>
- <script>
- Vue.component('child',{
- template: '<div>child</div>'
- })
- var vm = new Vue({
- el: '#root',
- methods: {
- handleClick: function () {
- alert('handleClick方法')
- }
- }
- })
- </script>
这样一来,就是一个原生的点击事件,是不是很方便呢?
微信小程序
互联网开发,终身学习者,欢迎您的关注!