vue组件添加事件@click.native操作


Posted in Javascript onOctober 30, 2020

1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件

2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn)

<Item @click.native = "shijian()"></Item>

补充知识:vue——组件间(兄弟组件间)事件派发与接收

法一

main.js

在初始化vue之前,给 data 添加一个名为 event 的空vue对象

new Vue({
 render: h => h(App),
 router,
 store,
 data: {
  event: new Vue()
 }
}).$mount('#app')

组件一:

methods: {
   addCart (e) {
    let pos = {
     x: parseInt(e.target.getBoundingClientRect().x + 4),
     y: parseInt(e.target.getBoundingClientRect().y + 4)
    }
    this.$root.event.$emit('ballPosition', pos)
   }
  }

组件二:

created () {
   this.$root.event.$on('ballPosition', (target) => {
    this._initBall(target)
   })
  },  
 methods: {
   _initBall (target) {
    this.ball = true
    this.ballMassage = target
   }
 }

完整案例:

抛物小球动画:

created () {
   this.$root.event.$on('ballPosition', (target) => {
    this._initBall(target)
   })
  },
  methods: {
   _initBall (el) {
    this.ball.show = true
    this.ball.el = el
   },
   beforeEnter (el) {
    let pos = this.ball.el.target.getBoundingClientRect()
    el.style.top = `${pos.y}px`
    el.style.left = `${pos.x}px`
   },
   enter (el, done) {
    // 触发动画重绘
    el.offsetHeight
    let [x, y] = [parseInt(this.$refs.cart.getBoundingClientRect().x + 4), parseInt(this.$refs.cart.getBoundingClientRect().y + 8)]
    el.style.top = `${y}px`
    el.style.left = `${x}px`
    el.style.transition = `left .1s linear, top .1s cubic-bezier(.63,.02,.96,.56)`
    done()
   },
   afterEnter () {
    this.ball.show = false
   }
  },

法二

中央通信: let eventVue = new Vue()

A methods:{function(){eventVue.$emit('自定义事件','数据')}}

B created(){eventVue.$on('A 发送过来的事件名','函数')}

中央通信:

let eventVue = new Vue()

兄弟组件 A 如下:

<template>
   <div class="components-a">
      <button @click="abtn">A按钮</button>
   </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
   name: 'app',
   data () {
    return {
        ‘msg':"我是组件A"
    }
   },
   methods:{
      abtn:function(){
          eventVue.$emit("myFun",this.msg)  //$emit这个方法会触发一个事件
      }
   }
}
</script>

兄弟组件 B 如下:

<template>
   <div class="components-a">
     <div>{{btext}}</div>
   </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
  name: 'app',
  data () {
    return {
      'btext':"我是B组件内容"
    }
  },
  created:function(){
    this.bbtn();
  },
  methods:{
    bbtn:function(){
      eventVue.$on("myFun",(message)=>{  //这里最好用箭头函数,不然this指向有问题
         this.btext = message   
      })
    }
  }
}
</script>

以上这篇vue组件添加事件@click.native操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery动态加载js三种方法实例
Aug 03 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 #Javascript
详解 javascript对象创建模式
Oct 30 #Javascript
ES6中的Javascript解构的实现
Oct 30 #Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 #Javascript
Echarts.js无法引入问题解决方案
Oct 30 #Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 #Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 #Javascript
You might like
多人战的战术与战略
2020/03/04 星际争霸
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
对pandas处理json数据的方法详解
2019/02/08 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python滑块验证码的破解实现
2019/11/10 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
安踏官方商城:anta.cn
2019/12/16 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
水果超市创业计划书
2014/01/27 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
质量月活动策划方案
2014/03/10 职场文书
一岗双责责任书
2014/04/15 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python