mint-ui中的cell无法绑定原生事件
<mt-cell is-link title="测试" v-on:click.native="test">
      <img slot="icon" src="../../assets/images/icon/credit-card.svg" width="24" height="24">
</mt-cell>

这样才能正常绑定事件test,去掉is-link也可以绑定,如下:

<mt-cell title="测试" v-on:click.native="test">
      <img slot="icon" src="../../assets/images/icon/credit-card.svg" width="24" height="24">
</mt-cell>


原因如下:

Vue.js官方文档中:

https://cn.vuejs.org/v2/guide/components-custom-events.html#将原生事件绑定到组件

给组件绑定原生事件

有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。例如:

<my-component v-on:click.native="doTheThing"></my-component>

 

进一步解释,原生就类似于你直接用

$element.addEventListener(click, callback);


绑定事件。

router-link会阻止click事件,你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。

通俗点,vue 自己定义的标签 <router-link> 还有 组件<my-vue-template/> 没有点击事件,H5不论什么标签,天生就有点击事件。加上 .native就变身H5标签。

说白了,意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要。


补充:

<div id="root">
  <child @click="handleClick"></child>
</div>
Vue.component('child',{
  template:'<div @click="handleChildClick">content</div>',
  methods: {
    handleChildClick(){
      alert('click child')
      this.$emit('click')
    }
  }
})
let vm = new Vue({
  el: '#root',
  methods: {
    handleClick(){
      alert('click')
    }
  }
})

当我给一个组件绑定一个事件的时候,实际上这个事件绑定的是自定义的事件,也就是你真正的鼠标点击触发的事件,并不是我绑定的click事件,如果想触发自定义的click事件,在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。


在元素上绑定的事件,监听的是原生事件,在组件上绑定的事件,监听的是自定义事件,需要用this.$emit()来触发。


参考:

https://cn.vuejs.org/v2/guide/components-custom-events.html#将原生事件绑定到组件

https://segmentfault.com/a/1190000018120443

真诚赞赏,手留余香
赞赏
随机推荐
ORDER BY 如何使用 PDO 参数绑定
反爬虫策略
ps -ef | grep 输出的具体含义
Wordpress 增加文章阅读次数或点赞次数(非插件实现)
《一个APP的诞生》:APP设计流程
ThinkPHP RESTful API 最佳实践1
高并发 php uniqid 用md5生成不重复唯一标识符方案
PHP判断file框是否已选择文件
CSS自定义字体font-face
Node.js 异步异常处理