vue怎么给自定义组件绑定原生事件
下面主要以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怎么给自定义组件绑定原生事件的更多相关文章
- NO.08--VUE之自定义组件添加原生事件
前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- vue组件绑定原生事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vuejs给组件绑定原生事件
给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...
- vue 给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- elmentUI组件怎么绑定原生事件
el-input为例: <el-input id="user-input" type="textarea" placeholder="请换行输入 ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
随机推荐
- 深入理解JVM，类加载器
虚拟机设计团队把类加载阶段中的“通过一个类的全限定名来获取描述此类的二进制字节流(即字节码)”这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个动作的代码模块称 ...
- Flask笔记：RESTful
RESTful是用于前台和后端进行通信的一种规范或者说一种风格,采用的是HTTP和HTTPS协议,数据传输的格式使用的都是JSON,而不是XML.通常,RESTful的URL中只有名词,没有动词,而且 ...
- Shell（三）：echo、printf、test命令
一.echo 1.显示普通字符串: echo "today is a wonderful day" 这里的双引号可以省略. 2.显示转义字符: echo "\" ...
- FCC---Learn How Bezier Curves Work---定义坐标轴点的值，影响斜率，改变速度。具体调试换值既可以体会
The last challenge introduced the animation-timing-function property and a few keywords that change ...
- HTTP中的2XX状态码
HTTP状态码分类 1XX --信息,服务器收到请求,需要请求者继续执行操作 2XX--成功,操作被成功接收并处理 3XX--重定向,需要进一步的操作以完成请求 4XX--客户端错误,请求包含语法错误 ...
- 跳转常规 -- 为什么不要使用404、500等http状态码作为业务代码响应
不要使用HTTP状态码作为业务代码响应 HTTP状态码 是指浏览器访问网址,成功或异常时浏览器或服务器告知用户的代码数字,它指的是网络或服务器的状态,有着不同的含义. 参加MDN.Java Api,常 ...
- -force_load （加载静态库崩溃）
-force_load Crash Log: Last Exception Backtrace: 0 CoreFoundation 0x2f087f06 __e ...
- Redis主从复制机制详解
Redis主从复制机制详解 Redis有两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AOF文 ...
- C/S与B/S架构
目录 软件开发架构 C/S架构 数据放在服务端和客户端的利弊: B/S架构 软件开发架构 开发软件,必须要开发一套 客户端 和 服务端 服务端与客户端的作用 服务端:24小时不间断提供服务 客户端:享 ...
- shell脚本里使用echo输出颜色
格式: echo -e "\033[字背景颜色;字体颜色m字符串\033[0m" 转义序列要是通过彩色化提示符来增加个性化,就要用到转义序列. 转义序列就是一个让 shell 执行 ...