下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看,

  赶时间的小伙伴可直接往下拉,看示例demo4

  注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件

  Demo1-直接给父组件绑定原生事件

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root" @click="handleClick">
Child
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>

  Demo2-如果像demo1直接给自定义组件child绑定原生事件,下面代码会报错,那么给child组件绑定原生事件应该怎么办呢?(先看demo3,后看demo4)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>

  

  Demo3-使用$emit()发布事件广播,然后父组件可以监听子组件向外触发的事件,并执相应方法即可

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div @click="handleChild">Child</div>',
methods: {
handleChild: function() {
this.$emit('click');
}
}
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>

  注:但这种方式是给组件绑定自定义事件,而不是绑定原生事件且要触发2个事件,比较麻烦,此时需要使用demo4的方法

  

  Demo4-直接使用事件修饰符native即可

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>

vue怎么给自定义组件绑定原生事件的更多相关文章

  1. NO.08--VUE之自定义组件添加原生事件

    前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...

  2. vue自定义组件添加原生事件监听

    注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...

  3. vue组件绑定原生事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. vuejs给组件绑定原生事件

    给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...

  5. vue 给组件绑定原生事件

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

  6. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  7. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...

  8. elmentUI组件怎么绑定原生事件

    el-input为例: <el-input id="user-input" type="textarea" placeholder="请换行输入 ...

  9. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

随机推荐

  1. VSCode中代码在浏览器中打开及实时刷新

    实时刷新方法一: 在项目目录下运行命令: browser-sync start --server --files "**/*.css,**/*.html,**/*.js" 实施刷新 ...

  2. Elastic:用Docker部署Elastic栈

    安装 因为我们需要使用docker来进行安装,我们必须安装: docker:根据不同的操作系统,请按照要求安装docker.可以到网站https://docs.docker.com/去安装 docke ...

  3. 不知道怎么向女神表白?Python三大神技分分钟带你成功逆袭!

    一行python的表白 首先祭出绝招,用1行python表白: print(' '.join([''.join([('I LOVE U'[(x-y) % 8] if ( (x*0.05)**2 + ( ...

  4. 用 Python 自动监测 GitHub 项目更新

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: GitPython PS:如有需要Python学习资料的小伙伴可以加 ...

  5. C#中对文件进行选择对话框打开和保存对话框进行复制

    场景 通过文件选择对话框选择文件 复制文件到指定路径 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教 ...

  6. 论文学习-wlg-基于二维材料的肖特基异质结构的通用尺度定律

    目录 主要公式: 各个段落的内容 第一页 第二页 第三页 名词的含义 功函数: 电子亲和力 肖特基势垒 肖特基二极管的原理 非相对论性电子气:未知 Rashba自旋电子系统: 参考链接: 主要公式: ...

  7. nginx location 配置详解

    指令作用 匹配指定的请求uri(请求uri不包含查询字符串,如http://localhost:8080/test?id=10,请求uri是/test) 语法形式 location [ = | ~ | ...

  8. [Php] windows下使用composer出现SHA384 is not supported by your openssl extension

    composer的版本太低了,需要更新composerwindows的安装使用https://getcomposer.org/Composer-Setup.exe报这个错Failed to decod ...

  9. win10查看桌面壁纸路径

    如题,win10查看自己壁纸的缓存路径,就是找到壁纸的原图:在explorer里输入 %USERPROFILE%\AppData\Roaming\Microsoft\Windows\Themes 1 ...

  10. I2C硬件与模拟的区别

    硬件I2C对应芯片上的I2C外设,有相应I2C驱动电路,其所使用的I2C管脚也是专用的,因而效率要远高于软件模拟的I2C:一般也较为稳定,但是程序较为繁琐. 硬件(固件)I2C是直接调用内部寄存器进行 ...