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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
django反向解析和正向解析的方式
2018/06/05 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
人力资源主管岗位职责
2014/01/29 职场文书
快餐公司创业计划书
2014/04/29 职场文书
感恩教育主题班会
2015/08/12 职场文书
导游词之青城山景区
2019/09/27 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android
vue中data里面的数据相互使用方式
2022/06/05 Vue.js
java中如何截取字符串最后一位
2022/07/07 Java/Android