Vue组件绑定原生事件

2019年3月12日18:37:04 发表评论 阅读(1,744)

Vue组件绑定原生事件

vue组件绑定原生事件?正常情况下我们想给一个组件绑定事件需要这样来写,首先需要通过$emit向上触发事件,然后监听事件,最后才会执行方法函数,比如下面这样的:

  1. <div id="root">
  2.         <child @click="handleClick"></child>
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             template: '<div @click="handleChildClick">child</div>',
  7.             methods: {
  8.                 handleChildClick: function () {
  9.                     this.$emit('click')
  10.                 }
  11.             }
  12.         })
  13.         var vm = new Vue({
  14.             el: '#root',
  15.             methods: {
  16.                 handleClick: function () {
  17.                     alert('handleClick方法')
  18.                 }
  19.             }
  20.         })
  21.     </script>

然后点击组件就会执行  alert('handleClick方法'),但是发现没,这样的话很麻烦,那么有没有更简单的执行方法呢?有的,就是这样,添加一个.native修饰符,如下:

  1. <div id="root">
  2.         <child @click.native="handleClick"></child>
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             template: '<div>child</div>'
  7.         })
  8.         var vm = new Vue({
  9.             el: '#root',
  10.             methods: {
  11.                 handleClick: function () {
  12.                     alert('handleClick方法')
  13.                 }
  14.             }
  15.         })
  16.     </script>

这样一来,就是一个原生的点击事件,是不是很方便呢?

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛