vue将原生事件绑定到组件

首先我们定义一个 child 组件，什么事件都不绑定，代码如下：

    Vue.component('child', {template: '<button>click me</button>'})// 然后我们在根组件中使用它，代码如下：<div id="app"><child></child></div>new Vue({el: '#app'})

正常情况下，我们点击按钮什么都不会发生对吧？
好，接下来呢，我们给 child 组件增加一个 @click 事件，代码如下：

    <div id="app"><child @click="handleClick"></child></div>

那么，这个 handleClick 方法是谁的呢？不用问，当然是父作用域下的方法啦，所以我们在根组件中增加一个方法，代码如下：

new Vue({el: '#app',methods: {handleClick () {alert('hello,world!')}}})

可是呢，当你再次点击按钮的时候发现，没有 hello, world! 没有弹出，也就是说 handleClick 方法根本没有执行。别急！这个时候 .native 修饰符就派上用场了，我们在 @click 加上这个修饰符试试，代码如下：

    <div id="app"><child @click.native="handleClick"></child></div>

再点击一下看看效果吧！是不是就出来了？ .native 修饰符的官方解释是：监听组件根元素的原生事件！
当然，如果不用 .native 修饰符，我们也可以通过 $emit 事件派发给父组件也是可以的，代码如下：

<div id="app"><child @click="handleClick"></child></div>
// .native 修饰符 demoVue.component('child', {template: '<button @click="click">click me </button>',methods: {click () {this.$emit('click', 'i from child...')}}})new Vue({el: '#app',methods: {handleClick (val) {console.log(val) // 'i from child...'}}})

vue将原生事件绑定到组件相关推荐

React学习:事件绑定、组件定义、for、map循环-学习笔记
文章目录 React学习:事件绑定.组件定义.for.map循环-学习笔记事件绑定组件定义 (参数传递) for.map循环 React学习:事件绑定.组件定义.for.map循环-学习笔记事件 ...
初识 Vue（11）---(Vue 中的事件绑定)
Vue 中的事件绑定案例:点击 Hello World ,从黑变红,再次点击,从红变黑... 通过 class 来实现页面效果的变更方法一:(通过对象)对象绑定 <!DOCTYPE h ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
【Vue】Vue数据及事件绑定
文章目录 1. 数据绑定 1.1 单向绑定 1.1.1 插值绑定 1.1.2 v-bind绑定 1.2 双向绑定 2. 事件绑定与监听 2.1 方法及内联处理器 2.2 修饰符事件修饰符键值修饰符 ...
Vue2.0开发之——Vue基础用法-事件绑定$event(20)
一概述事件参数对象 $event表示事件参数对象event 事件修饰符二事件参数对象 2.1 说明在原生的 DOM 事件绑定中,可以在事件处理函数的形参处,接收事件参数对象 event 2. ...
reactjs基础知识：原生事件绑定
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>D ...
vue移除事件绑定 Orz
添加一个标记位 <p @click="flag && clickEvent()"></p> 定时器的清除 $(document).ready ...
Vue.js 自定义事件
事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换.而是触发的事件名需要完全匹配监听这个事件所用的名称.举个例子,如果触发一个 camelCase 名字的事件: this.$emit( ...
六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...

vue将原生事件绑定到组件

vue将原生事件绑定到组件相关推荐

最新文章

热门文章