NO.08--VUE之自定义组件添加原生事件
前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧:
许多vue新手在工作开发中会遇到一个问题,直接使用 button
添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就会发现添加不上。比如我写了两个 button
,一个点击让 div
变红,一个点击让 div
变蓝。
App.vue文件
<template>
<div id="app">
<button @click="changeRed">变红</button>
<!-- 使用 Btn 组件 并添加原生事件 -->
<Btn @click="changeBlue"></Btn>
<div :class="box"></div>
</div>
</template>
<script>
// 引入 Btn 这个组件
import Btn from './assets/components/Btn.vue'
export default {
name: 'app',
data () {
return {
box: 'yellow'
}
},
methods: {
changeRed(){
this.box = 'red'
},
changeBlue(){
this.box = 'blue'
}
},
// 组件 注册
components: {
Btn
}
}
</script>
<style>
.yellow{
width: 200px;
height: 200px;
background: #ff0;
}
.red{
width: 200px;
height: 200px;
background: #f00;
}
.blue{
width: 200px;
height: 200px;
background: #00f;
}
</style>
Btn.vue 文件
<template>
<div class="btn">
<button>变蓝</button>
</div>
</template>
会发现 Btn
的绑定事件无效。其实 vue
官方是有提供对应的方法的, 给组件绑定原生事件,就是在自定义组件 Btn
的原生事件后面加个 .native
后缀就好了。
App.vue文件
<template>
<div id="app">
<button @click="changeRed">变红</button>
<!-- 使用 Btn 组件 并添加事件 -->
<Btn @click.native="changeBlue"></Btn>
<div :class="box"></div>
</div>
</template>
效果:
NO.08--VUE之自定义组件添加原生事件的更多相关文章
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
- 四、vue基础--自定义组件
1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- 【VUE】自定义组件
[VUE]自定义组件 转载: ============================================ ======================================== ...
- vuejs给组件绑定原生事件
给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- vue组件绑定原生事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 【Linuc-CentOS 】通过yum安装 指定版本的nodejs
原 [Linuc-CentOS ]通过yum安装 指定版本的nodejs 2018年06月21日 06:56:32 黑夜的风 阅读数:884 版权声明:本文为博主原创文章,未经博主允许不得转载. ...
- Session["userName"]与Session["userName"].ToString()是不一样的~~
今天调了个代码,发现老是跟预期的结果不一样,找了半天的原因,一个一个的往回找,终于逮出元凶了! 我今天才发现,下面两个是不一样的: //有问题的代码 if (Session["uid&quo ...
- (转)python类class中_init_函数以及参数self的简单解释
1)_init_函数(方法) #-*- encoding:utf-8 -*- class NewClass(object): def __init__(self,name): print self s ...
- java中NULL与" "的区别
null是没有地址""是有地址但是里面的内容是空的 null和""的区别 问题一: null和""的区别 String s=null; st ...
- 如何使用jquery.qrcode.js插件生成二维码
1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...
- MYSQL 5.7.25最后一个5.x版本记录
一:下载 位 https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.25-win32.zip 位 https://dev.mysql.co ...
- (转载)SendKeys.Send()的使用
SendKeys.Send() 使用SendKeys将键击和组合键击发送到活动应用程序.此类无法实例化.若要发送一个键击给某个类并立即继续程序流,请使用Send.若要等待键击启动的任何进程,请使用Se ...
- cookie,session,token
发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应, 尤其是我不用 ...
- Easy-UI中datebox的默认显示当前日期的最简单的两种方法
在中有一个Today按钮就是实现显示当前日期,所以我们在src/jquery.datebox.js文件中可以找到currentText:'Today'.所以我们可以使用'currentText'和'T ...
- python3配置文件的增删改查,记录一下
#!/usr/bin/env python3 import json #json模块,用于将像字典的字符串转换为字典 import re #re模块,查找替换 import shutil #copy文 ...