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 的编译器为它添加特殊功能.在有些情况 ...
随机推荐
- 洛谷 P1351 （枚举）
### 洛谷P1351 题目链接 ### 题目大意: 给你 n 个节点, n-1 条边的无向联通图.若定义(u,v)表示 u 与 v 点的最短距离,如果 (u,v)值为 2 ,则这两个点的点权之积(即 ...
- jsp模板
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+re ...
- C#命名规则和设计规则
Pascal 将每个单词的第一个字符大写.遇到两个字母的首字母缩略词时,两个字母都要大写 命名空间:使用公司名作为前缀.在第二级名称中使用稳定的与版本无关的产品名称 类型:名词或名词短语命名 结构:名 ...
- PlayJava Day001
今日所学: /* 2019.08.19开始学习,此为补档. */ 三目(元)运算符 格式:(表达式)? 表达式为true返回值A : 表达式为false返回值B 例: String s=2>3 ...
- 5-网宿CDN客户端推流NGB
网宿NGB调度系统(类似httpdns原理)从服务端分发给客户端推流IP,实现基于APP realip精准调度模式. 参考官网介绍:https://www.wangsu.com/content/det ...
- RandomAccessFile(),读写文件数据的API,以及复制文件操作
package seday03;import java.io.File;import java.io.RandomAccessFile; import java.io.IOException; /** ...
- LinuxShell脚本——循环结构
LinuxShell脚本——循环结构 摘要:本文主要学习了Shell脚本中的循环结构. while循环 基本语法 while循环是最简单的一种循环,如果条件满足则执行循环里的语句,如果条件不满足则退出 ...
- maven新建项目的几种方式和启动
方式一: 第1步:转到 New 菜单 Other.. -> Maven -> Maven Project ,然后单击 Next .如下图所示 - 第2步:在New Maven Projec ...
- Xcode打印如下错误:Unbalanced calls to begin/end appearance transitions 解决办法
今天在做自己的项目时遇到如下错误,项目运行以后,打印台打印如下: Unbalanced calls to begin/end appearance transitions for <HomeVi ...
- sqlserver2008R2 本地不能用localhost连接
问题 在重新安装sql Server2008R2的时候,本地安装完成之后,想用localhost或者127.0.0.1登录的时候发现一直报错,无法连接,以下是解决方案. 打开Sql Server配置管 ...