vue组件绑定原生事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<child @click="handleClick"></child><!--这个click为自定义事件-->
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
template: '<div @click="handleChildClick">child</div>',
methods: {
handleChildClick: function() {
alert('child click');
this.$emit('click');//绑定一个自定义click事件
}
}
})
var app = new Vue({
el: '#app',
methods: {
//父组件接收到绑定的handleClick事件
handleClick: function() {
alert('click');
}
}
})
//整体先弹出child click,再弹出click
</script>
</body>
</html>
添加.native表示绑定原生事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<child @click.native="handleClick"></child><!--添加.native表示绑定原生事件-->
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
template: '<div>child</div>',
})
var app = new Vue({
el: '#app',
methods: {
handleClick: function(){
alert('click')
}
}
})
//弹出click
</script>
</body>
</html>
vue组件绑定原生事件的更多相关文章
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- vuejs给组件绑定原生事件
给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...
- vue 给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...
- Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
- NO.08--VUE之自定义组件添加原生事件
前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- Vue-native绑定原生事件
首先介绍一下是什么意思: 意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要 <div id = "app"> <m ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- elmentUI组件怎么绑定原生事件
el-input为例: <el-input id="user-input" type="textarea" placeholder="请换行输入 ...
随机推荐
- 2019HDU多校第一场 BLANK DP
题意:有四种数字,现在有若干个限制条件:每个区间中不同的数字种类必须是多少种,问合法的方案数. 思路: 定义 dp[i][j][k][t] 代表填完前 t 个位置后,{0,1,2,3} 这 4 个数字 ...
- servlet 实践
基础 当Servlet引擎收到一个请求,它将请求所有的细节汇编到一个HttpServletRequest对象.细节包括请求头部.URI.查询字符串和任意发送的参数等等.类似地,它初始化一个处理响应头部 ...
- 常用的kubectl命令
本文主要介绍kubernetes排查问题时经常用到的命令.这里主要借助kubectl命令来实现.以下列出常用命令,后面会对每个命令进行详细解释,并举例: kubectl核心命令 get 获取列出一个 ...
- 3、selenium 问题汇总
一.'chromedriver' executable needs to be in PAT: 解决方法 下载谷歌驱动文件:Chromedriver.exe 将Chromedriver.exe 拷贝 ...
- spring mvc 整合 druid
环境: ubuntu eclipse maven 一. pom.xml 加入druid 依赖 <!-- https://mvnrepository.com/artifact/com.alibab ...
- Spring data jpa 依赖配置
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
- linux软件包rpm的使用
一rpm包管理器 (一)rpm的介绍 rpm不仅是文件的后缀,也是一个工具,外部命令,程序包管理器 功能:将编译好的应用程序的各组成文件打包一个或几个程序包文件,从而方便快捷地实现程序包的安装.卸载. ...
- 流量隔离方案 Dpath 护航双十一新零售
需求 在今年的双11准备期间,业务同学提出要针对新零售进行特殊的保障,希望新零售过来的流量,单独进入到一批机器,和其他普通流量隔离开来,这对新零售系统稳定性提出更高的要求. 需求总结下来就是: 针对特 ...
- POJ A Plug for UNIX (最大流 建图)
Description You are in charge of setting up the press room for the inaugural meeting of the United N ...
- Linux 下安装配置redis
第一部分:安装redis 本人是先下载了4.0.2版本的redis安装包直接远程上传到linux服务器/usr/local目录下 那么安装过程如下: tar -zxvf redis-4.0.2.tar ...