vue将原生事件绑定到组件

首先我们定义一个 child 组件,什么事件都不绑定,代码如下:

    Vue.component('child', {
      template: '<button>click me</button>'
    })
   // 然后我们在根组件中使用它,代码如下:
    
    <div id="app">
      <child></child>
    </div>
    new Vue({
      el: '#app'
    })

正常情况下,我们点击 按钮 什么都不会发生对吧?
好,接下来呢,我们给 child 组件增加一个 @click 事件,代码如下:

    <div id="app">
      <child @click="handleClick"></child>
    </div>

那么,这个 handleClick 方法是谁的呢?不用问,当然是父作用域下的方法啦,所以我们在根组件中增加一个方法,代码如下:


    new Vue({
      el: '#app',
      methods: {
        handleClick () {
          alert('hello,world!')
        }
      }
    })

可是呢,当你再次点击按钮的时候发现,没有 hello, world! 没有弹出,也就是说 handleClick 方法根本没有执行。别急!这个时候 .native 修饰符就派上用场了,我们在 @click 加上这个修饰符试试,代码如下:

    <div id="app">
      <child @click.native="handleClick"></child>
    </div>

再点击一下看看效果吧!是不是就出来了? .native 修饰符的官方解释是: 监听组件根元素的原生事件!
当然,如果不用 .native 修饰符,我们也可以通过 $emit 事件派发给父组件也是可以的,代码如下:


    <div id="app">
      <child @click="handleClick"></child>
    </div>
// .native 修饰符 demo

    Vue.component('child', {
      template: '<button @click="click">click me </button>',
      methods: {
        click () {
          this.$emit('click', 'i from child...')
        }
      }
    })
    
    new Vue({
      el: '#app',
      methods: {
        handleClick (val) {
          console.log(val) // 'i from child...'
        }
      }
    })
展开阅读全文
  • 4
    点赞
  • 2
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:马嘣嘣 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值