组件绑定原生事件

╰+攻爆jí腚メ 2022-05-23 22:10 259阅读 0赞

,//在子组件里声明方法属于原生事件绑定，且执行子组件里的方法。如果也在父组件里写事件，则不会执行

<!DOCTYPE html>

<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script type="text/javascript" src="js/vue.js" ></script>  
</head>  
<body>  
<div id="root">  
<child @click="handleClick"></child>  
</div>  
<script>  
Vue.component('child',\{  
template:'<div @click="handleChildClick">child</div>'  
methods:\{  
handleChildClick:function  () \{  
alert('chld')  
\}  
\}  
\})  
var vm =new  Vue(\{  
el:"\#root",  
methods:\{  
handleClick:function  () \{  
alert('chld1')  
\}  
\}  
\})  
</script>  
</body>

</html>

![201805161218288][]

父组件里的方法是自定义的，需要有子组件向外触发，才能执行handleClick函数。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>组件绑定</title>  
<script type="text/javascript" src="js/vue.js" ></script>  
</head>  
<body>  
<div id="root">  
<child @click="handleClick"></child>  
</div>  
<script>  
Vue.component('child',\{  
template:'<div @click="handleChildClick">child</div>',//在子组件里声明方法属于原生事件绑定，且执行子组件里的方法。如果也在父组件里写事件，则不会执行  
methods:\{  
handleChildClick:function  () \{  
alert('chld1')  
this.$emit('click')  
\}  
\}  
\})  
var vm =new  Vue(\{  
el:"\#root",  
methods:\{  
handleClick:function  () \{  
alert('chld2')  
\}  
\}  
\})  
</script>  
</body>

</html>

两层传递太麻烦了，如何解决呢

给父组件绑定原生事件，只需要在在加一个  .native

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

[201805161218288]: /images/20220524/eb323df113ca42c4b6adf70ae6d587b5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-组件自定义事件(绑定和解绑)

组件自定义事件(绑定) 像click,change这些都是js的内置事件，我们可以直接使用，本次我们学习自己根据需求打造全新的事件，但是js内置的是给html元素用的,本

分手后的思念是犯贱/ 2023年10月12日 19:36/ 0 赞/ 70 阅读

相关 Vue之组件（绑定原生事件、$listeners、$ref）

课程大纲（1）组件绑定原生事件（2）监听器属性$listeners （3） r e f 与 ref与 ref与refs注册引用信息属性和对象组

﹏ヽ暗。殇╰゛Y/ 2023年06月11日 03:20/ 0 赞/ 273 阅读

相关 php 事件绑定,php实现事件绑定

class EventHandle \{ private static $\_map = array(); //类似jquery绑定事件 public function

谁践踏了优雅/ 2022年11月12日 12:54/ 0 赞/ 318 阅读

相关【JS】原生JS事件绑定onclick和addEventListener

onclick绑定方式优点： \- 简洁 \- 处理事件的this关键字指向当前元素缺点： \- 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，

女爷i/ 2022年05月27日 04:42/ 0 赞/ 630 阅读

相关组件绑定原生事件

,//在子组件里声明方法属于原生事件绑定，且执行子组件里的方法。如果也在父组件里写事件，则不会执行 <!DOCTYPE html> <html> <head>

╰+攻爆jí腚メ/ 2022年05月23日 22:10/ 0 赞/ 260 阅读

相关 Vue_给组件绑定原生事件

当我们使用组件的时候，想点击组件触发事件，要在子组件里定义触发事件，在父组件定义是没用的. 只有从子组件往外触发自定义事件，父组件里定义的触发函数才有用。那么怎么样才能直

比眉伴天荒/ 2022年05月22日 13:34/ 0 赞/ 256 阅读

相关 Vue2.x之给组件绑定原生事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

妖狐艹你老母/ 2022年05月18日 04:12/ 0 赞/ 211 阅读

相关 vue学习（十二）给组件绑定原生事件

1，例子如下 <table> <tbody> <tr> <td> <pre><code><!DOCTYPE html> <html lan

ゞ浴缸里的玫瑰/ 2022年04月22日 12:14/ 0 赞/ 211 阅读

相关 vue中父子组件绑定事件

父子组件绑定事件：注意：父组件是自定义事件，由子组件传递触发事件信息；子组件是系统事件比如：click等 <div id="app"> <c

柔光的暖阳◎/ 2022年04月16日 01:23/ 0 赞/ 448 阅读

相关 vue 给组件绑定原生事件

不想用子组件$emit事件,直接用@click.native事件可以触发父组件的事件 <!DOCTYPE html> <html lang="en">

àì夳堔傛蜴生んèń/ 2022年01月20日 21:03/ 0 赞/ 263 阅读