vue学习（十二）给组件绑定原生事件

最新推荐文章于 2023-11-30 16:37:04 发布
最新推荐文章于 2023-11-30 16:37:04 发布
阅读量163 收藏
点赞数
分类专栏： vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36305027/article/details/83741596
版权

1，例子如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <counter @click.native="handleClick"></counter>
    </div>

    <script>

        Vue.component('counter',{
            template:'<div>hello world</div>'
        })

        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue'
            },
            methods:{
                handleClick:function () {
                    alert('调用到了')
                }
            }
        })
    </script>
</body>
</html>

2，因为在组件中的方法，都是通过组件背部触发的，如果要使用原生的，需要在方法后面加上.native

dream21st
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue-给组件绑定原生事件
weixin_45497246的博客
05-13 1918
当我给一个组件绑定一个事件的时候，实际上这个事件绑定的是自定义的事件，也就是你真正的鼠标点击触发的事件，并不是我绑定的click事件。 所以在下面这个例子里，点击子组件，并不会有弹窗提示。 如果想触发自定义的click事件，就得在子组件里对元素进行事件绑定，这个事件才是真正的原生事件。 在元素上绑定的事件，监听的是原生事件 在组件上绑定的事件，监听的是自定义事件，需要用this.$emit()来触发。 也就是酱婶的： 在开发的过程中这样写有点太麻烦，假如我有这样的需求，我就想在子组件上监听原生的事件
VUE之组件（绑定原生事件、$listeners、$ref）
weixin_45626166的博客
10-28 802
组件绑定原生事件 有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下 1、首先定义一个 child 组件，什么事件都不绑定，代码如下： 步骤： 2、接下来，给 child 组件增加一个 @click 事件，如下所示 3、这个 handleClick 方法是谁的呢？当然是父作用域下的方法，所以接下来在根组件中增加一个方法，代码如下 分析验证： 当点击按钮的时候发现，没有...
Vue 中给组件绑定原生事件
weixin_33804582的博客
02-11 185
绑定原生事件 &lt;div id="root"&gt; &lt;child @click="handleClick"&gt;&lt;/child&gt; &lt;/div&gt; Vue.component('child',{ template:'&lt;div @click="handleChildClick"&gt;...
Vue给组件绑定原生事件
qq_37117521的博客
10-15 158
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>给组件绑定原生事件</title> <script src="./vue.js"></script> </head> <body> <div i...
[Vue] 给组件绑定原生事件
BnuzLeon的博客
02-13 539
NATIVE EVENT 例子 参考代码：code 实现功能： 给组件绑定原生事件的两种实现方法 方法一 注意 声明一个组件： var child = { template: '&lt;div&gt;Click&lt;/div&gt;', } 使用组件并且绑定事件： &lt;child @click="handleClick"&gt;&lt;/child&gt; 事件方法实现： m...
vue——给组件绑定原生事件：.native
weixin_54362381的博客
08-24 1293
给组件绑定原生事件：.native 1、在组件标签上绑定的事件是自定义事件，在组件模板里绑定的事件才是原生的事件。（自定义事件可以通过在子组件中通过this.$emit去触发，但是这样太麻烦） <div id="root"> <!-- 监听自定义事件 --> <child @click="handleClick"></child> </div> <script> Vue.compone
vue学习笔记之给组件绑定原生事件操作示例
10-15
总的来说，Vue组件绑定原生事件的关键在于理解Vue的事件系统和如何利用`native`修饰符。通过`@click.native`，我们能够在保持组件封装的同时，方便地处理DOM级别的事件。这在开发过程中能提高代码的可读性和效率，...
23.VUE之组件（绑定原生事件、$listeners、$ref）
weixin_45492145的博客
10-28 271
目录 （1）组件绑定原生事件 （2）监听器属性listeners（3）listeners （3）listeners（3）ref与$refs注册引用信息属性和对象 组件绑定原生事件 有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下 1、首先定义一个 child 组件，什么事件都不绑定，代码如下： 步骤： 2、接下来，给 child 组件增加一个 @click 事件，如下所示...
想要组件可以监听点击，需要如何做？
qq_46071321的博客
01-17 175
<template> //如果直接在组件上@click是监听不到的，下面是错误做法 <back-top @click="backClick"/> //正确做法：.native ——监听组件根元素的**原生事件** <back-top @click.native="backClick"/> </template> <script> import BackTop from "@/components/content/backTop/BackTop";
vue2 基础学习08（给组件绑定原生事件）
我的乌托
04-03 235
<ul> 在组件上设置点击事件 &lt;div id="app" &gt; &lt;child @click="handleClick"&gt;&lt;/child&gt; &lt;/div&gt; &lt;script&gt; ...
13 Vue 给组件绑定原生事件方法汇总和总结
野路子云遇见不同的自己
10-24 1492
13 Vue 给组件绑定原生事件方法汇总和总结
vue的原生DOM事件、绑定组件、自定义事件
最新发布
babywenever的博客
11-30 822
如果加上 .native事件修饰符，就会变为原生事件，即便子组件中有$emit自定义事件操作，但是父组件中的事件仍旧会以“vue的原生事件”为优先，原生事件的优先级高于自定义事件。父组件中， 利用v-on进行事件的监听操作，可以不传递参数，也可以不加()，那么回调函数中的event就是默认的事件对象。@click.native 时事件会变为原生事件，会将事件绑定到子组件的根元素上，这时点击子组件的所有元素都会触发事件，因为产生了冒泡。toParent是自定义事件，自定义事件实现了子组件与父组件的通讯。
防止乱码，请将用于页面编码的meta charset放到title的前面
gzblog的专栏
06-21 992
通常我们放置的顺序是先title，再charset，就像下面的：我的页面title＜/title>现在请将它们顺序颠倒过来:我的页面title＜/title>这样做的目的，是考虑到page在loading的时候，是从上往下load的，为了不让特殊情况下，你的页面会出现乱码（在title这里），那么把charset放在前面，浏览器就知道你的
025参考点
哔了狗的博客
03-30 175
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;参考点&lt;/title&gt; &lt;style&gt; #f{ position: relative; } #tip{ w
Vue 如何给组件绑定原生事件
weixin_34204722的博客
04-05 854
由于组件上面的事件默认为自定义事件，那么此例中<child @click="handleClick"></child>不会被系统识别为我们理解中的点击事件必须通过$emit方法绑定它才行。 <body> <div id="root"> <child @click="handleClick"></child&g...
如何用vue 语法 给html元素绑定原生js DOM 事件
踩坑小王子
01-23 8647
问题描述： 最近在使用vue全家桶开发页面，而且也是刚入门vue，很多vue的东西都是现学现用。 想要给一个html元素绑定DOM事件，我以前 肯定是用javascipt 的DOM 操作，但是既然项目用了vuejs ，我就想用vuejs实现一下，但是官方文档的这块写的非常简略，我就补充一下 解决问题： 首先需要分两种情况： 当想要绑定的元素是html原生标签，示例如下： // 绑定点击事
JavaScript笔记(前两章是英文)
qq_52476226的博客
08-21 579
狂神Js笔记
Gin编写邮件告警接口（添加优化日志记录）
南宫乘风-Linux运维-虚拟化容器-Python编程 ownit.top
12-17 1717
GO的WEB编程（GIN实现邮件接口报警） Gin编写邮件接口（支持多人发送） 这个代码基于上面两个已经完成的功能上实现。 实现下面功能 日志分割 日志记录 效果图 因为日常范围，我们在操作系统上，需要报警时，只能采用mailx来使用。需要配置账号，密码，和邮箱认证。如果需要多台使用的话，岂不是很麻烦，要配置多台，这个导致密码很不安全，容易泄露。所以，为了安全，有效，更方便，我们可以采用接口发送邮件。 （1）构建接口 （2...
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
发出的红包

打赏作者

dream21st

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值