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="请换行输入 ...
随机推荐
- C# IOC DI 学习
之前一直不理解IOC DI,今天使劲研究了下,感觉朦朦胧胧有点感觉了,网上的这篇文章对我的有很大的启发 http://www.cnblogs.com/jin-yuan/p/3823559.html 我 ...
- Tensorflow中的图（tf.Graph）和会话（tf.Session）详解
Tensorflow中的图(tf.Graph)和会话(tf.Session) Tensorflow编程系统 Tensorflow工具或者说深度学习本身就是一个连贯紧密的系统.一般的系统是一个自治独立的 ...
- OpenCV常用基本处理函数（5）图像模糊
2D卷积操作 cv.filter2D() 可以让我们对一幅图像进行卷积操作, 图像模糊(图像平滑)使用低通滤波器可以达到图像模糊的目的.这对与去除噪音很有帮助.其实就是去除图像中的高频成分(比如:噪音 ...
- 【leetcode】940. Distinct Subsequences II
题目如下: Given a string S, count the number of distinct, non-empty subsequences of S . Since the result ...
- PHP dir() 函数
使用 dir() 函数: <?php$d = dir(getcwd()); echo "Handle: " . $d->handle . "<br> ...
- Qt installer framework学习
一.官网的介绍部分网址 http://doc.qt.io/qtinstallerframework/ifw-overview.html 二.安装界面介绍 2.1 安装界面流程 介绍>>选择 ...
- AcWing 225. 矩阵幂求和 （矩阵快速幂+分治）打卡
题目:https://www.acwing.com/problem/content/227/ 题意:给你n,k,m,然后输入一个n阶矩阵A,让你求 S=A+A^2+A^3.+......+A^k 思 ...
- QC浏览器登陆自动关闭
服务器(win2003 SP2)上装了个QC10,用了一段时间后突然登陆不上了.可以看见域及Project信息,但是登陆后加载几秒后突然自动关闭.局域网内的其他机器可以登陆. 解决方案:修改数据执行保 ...
- PHP生成PDF完美支持中文,解决TCPDF乱码
PHP生成PDF完美支持中文,解决TCPDF乱码 2011-09-26 09:04 418人阅读 评论(0) 收藏 举报 phpfontsheaderttfxhtml文档 PHP生成PDF完美支持中文 ...
- PHP处理地址匹配出省市区
function handleAddress($address ='广东省深圳市龙华新区大浪街道同胜科技大厦'){ preg_match('/(.*?(省|自治区|北京市|天津市))/', $addr ...