Vue2.x之给组件绑定原生事件

最新推荐文章于 2023-07-05 20:28:06 发布
最新推荐文章于 2023-07-05 20:28:06 发布
阅读量280 收藏
点赞数
分类专栏： vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33733970/article/details/81278597
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <child @click.native="handleClick"></child>
  </div>
  <script>
    Vue.component('child',{
      template:'<div>hello child</div>'
    });
    var app = new Vue({
      el:'#app',
      methods:{
        handleClick(){
          alert('触发原生事件')
        }
      }
    })
  </script>
</body>
</html>
Quincy379
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习笔记之给组件绑定原生事件操作示例
10-15
主要介绍了vue学习笔记之给组件绑定原生事件操作,结合实例形式详细分析了vue.js组件绑定原生事件相关原理、实现方法与操作注意事项,需要的朋友可以参考下
Vue.js每天必学之组件与组件间的通信
01-21
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
12-09
Vue2.0 传值方式： 在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。 Vue常用的三种传值方式有： •父传子 •子传父 •非父子传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给
12. vue2 利用广播实现非父子组件的传值
letianxf的博客
07-08 309
vue2 利用广播实现非父子组件的传值
vue2非父子传值
qianduan2001_5的博客
07-05 45
【代码】vue2非父子传值。
Vue组件传值（二）之 非父子组件传值
weixin_34293246的博客
03-06 53
Vue中非父子组件之间是如何实现通信的？ 　　本章主要讲的是非父子组件传值，父子组件传值请看上一篇文章。 　　1、创建新的Vue实例引入项目中，通过$emit、$on来实现非父子组件传值； 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8...
vue2.x父子组件传值
liangmaxmin的博客
03-18 422
父组件： 子组件
基于vue2.x + vant2.x 实现的仿微信 @ 功能.zip
05-18
功能描述：基于vue2.x + vant2.x 实现的仿微信@功能(稍作修改即可支持原生js和react)，兼容pc端和手机端，如有bug，欢迎提出~ 功能亮点 自定义弹窗样式及内容 动态绑定用户信息 兼容vue、react及原生js 兼容pc端和...
vue.js轮播图组件使用方法详解
01-19
这个组件的滑动特效是原生js搭配vue的数据绑定实现的，不依赖其他库，虽然可以再vue.js中引入swiper,但是引入类库的最大的缺点就是冗余代码太多，所以还是自己写一个比较好，简单扼要。（ps:组件的宽高设置还有有点...
vue使用vuex在非父子组件之间传值
my_love_download的博客
12-23 604
本篇文章之前是我在三大框架的对比中已经总结了vue使用vuex在非父子组件之间的传值,但是想到自己应该单独把这个知识拿出来总结一下,方便以后查阅 1.先创建父组件A.vue,并且引入B组件和C组件,B和C的关系是兄弟组件(非父子关系) <template> <div> <B></B> <C></C> ...
vue：非父子组件传值
EchoLiner的博客
04-14 441
非父子组件传值
非父子组件使用 vuex 传参
NancyFyn的博客
06-23 241
首先要先安装 vuex npm install vuex --save 如果是修改成熟的项目，一般不需要此步骤。 在store 文件夹下创建 index.js 文件 import Vue from'vue' import Vuex from 'vuex' Vue.use(Vuex) // 创建仓库，用来存储共用的数据 export default new Vuex.stroe({ state: { appList: [], platformList: [] }， mutation
vue 非父子组件之间实现数据传递 vuex
苏先生前端
12-02 1248
我们知道父子组件直接的数据传递通过标签属性行间 将数据挂在到了标签上 子组件中通过props特性验证来获取来自父组件的数据 进行渲染 在非父子组件中也借用这样的原理 原理图如下 第一种 子传父 父传子 特点 ： 传值要经过父组件 不断寻找各组件之间的从属关系 操作复杂 适合一层 父子兄弟组件传递 代码如下： //子组件1传值到父组件 <template> ...
vue非父子组件传值方法，Vuex（2）
qq_29116547的博客
10-29 405
安装vuex插件 npm install vuex --save 1.创建index.js ，定义默认数据 import Vue from 'vuex' Vue.use(Vuex) //创建一个仓库，存储共用的内容 export default new Vuex.Store({ state:{ city:'北京' } }) 2.在main.js引入使用：...
vue——非父子组件间的传值：Vuex、发布订阅模式（总线机制）
weixin_54362381的博客
08-24 272
非父子组件间的传值：Vuex、发布订阅模式（总线机制） Bus/总线机制发布订阅模式/观察者模式： 1、Vue.prototype.bus = new Vue();给Vue这个类上挂了一个bus属性，通过这个类创建的实例上都会有bus这个属性，它都指向同一个vue的实例。 2、在子组件的template里绑定一个事件（如handle），在子组件的methods里定义这个事件（如handle），通过this.bus.$emit('事件名',参数)【this.bus指的是这个实例上挂载的bus，这个bus又是v
vue2.X基础知识五之非父子组件通信
啊哈前端的专栏
05-18 303
  在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景，非父子组件一般有两种，兄弟组件和跨多级组件。1、中央事件总线(bus)处理任何组件通信  在vue2.x中推荐使用一个空的Vue实例作为中央事件总线(bus)，也就是一个中介。例如：&lt;div id="app"&gt; {{ message }} &lt;component-a&gt;&lt;/compon...
vue非父子组件通信传值（任意组件）
yzhean的博客
11-15 247
创建global-bus.js文件 (呼叫中心，通信中心)导入vueimport Vue feom 'vue' export default new Vue()从a传到bb注册 a发布b 导入 globalBusimport globalBus from 'xxxxx' 在vue的钩子生命周期函数初始化 代码如下： globalBus.$on('事件名称', (data 声明对象接收a传过...
Vue2组件通信之非父子关系通信探讨分析一
Xmumu_的博客
03-26 1301
文章目录开篇通过中间组件传递分析父链 开篇 这就接着昨天的内容再来玩一玩非父子关系！这里只谈论两种情况哈 通过中间组件传递 <div id="app"> {{message}} <component-a></component-a> </div> var bus = new Vue(); Vue.component('component-a', { template: '<button @click="handleEve
学习笔记(05):Vue2.x从入门到实战-v-on：绑定事件监听器
weixin_45721211的博客
02-22 92
课程从Vue2.x版本的入门，一直到实战课程共58集。包括内部指令、全局API、选项、实例和内置组件、Vue-cli、Vue-router、vuex。后有一门Vue实战，带你作一个快餐店的收银系统。...
vue2中获取DOM绑定原生js键盘事件
最新发布
07-14
在Vue2中，你可以通过使用`ref`来获取DOM元素的引用，并使用原生的JavaScript来绑定键盘事件。以下是一个示例： ```html <template> <div> <input type="text" ref="inputRef" /> </div> </template> <script> export default { mounted() { this.$refs.inputRef.addEventListener('keyup', this.handleKeyUp); }, beforeDestroy() { this.$refs.inputRef.removeEventListener('keyup', this.handleKeyUp); }, methods: { handleKeyUp(event) { if (event.key === 'Enter') { // 处理回车事件的逻辑 console.log('回车键被按下了！'); } } } } </script> ``` 在上面的示例中，我们给输入框添加了一个`ref`属性，将其命名为`inputRef`。在`mounted`生命周期钩子函数中，我们通过`this.$refs.inputRef`获取到输入框的DOM引用，并使用`addEventListener`方法来绑定`keyup`事件和对应的处理函数`handleKeyUp`。 在`handleKeyUp`方法中，我们检查按下的键是否是回车键（通过`event.key`属性），如果是，则执行相应的逻辑。在组件销毁之前，我们使用`removeEventListener`方法来移除键盘事件的监听。 这样，你就可以使用原生的JavaScript来绑定和处理键盘事件了。记得在适当的时候移除事件监听，以避免内存泄漏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值