vue绑定原生事件

2018-12-20 22:12:33

<!DOCTYPE html> <html lang="en"> <head&...vue不使用绑定原生事件</title> <script src="vue.js"></s

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue不使用绑定原生事件</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child @click="handleClick"></child>
</div>
<script>
  Vue.component('child',{
    template:'<div @click="handleChildClick">点击</div>',
    methods:{
      handleChildClick(){
        alert('handleChildClick');
        this.$emit('click');
      }
    }
  });
  var app=new Vue({
    el:'#app',
    methods:{
      handleClick(){
        alert('click');
      }
    }
  })
</script>
</body>
</html>

对比：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue绑定原生事件</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child @click.native="handleClick"></child>
</div>
<script>
  Vue.component('child',{
    template:'<div>点击</div>'
  });
  var app=new Vue({
    el:'#app',
    methods:{
      handleClick:function(){
        alert('click');
      }
    }
  })
</script>
</body>
</html>

收起

展开全文

vue绑定点击事件@click_复习之给Vue组件绑定原生事件（v-on修饰符.native）

2020-12-12 05:46:05

在组件上去监听事件时，我们监听的是组件的自动触发的自定义事件，如： <div id="app"> <a-cmp @click='handleClick'></a-cmp> </div> <script> const vm = new Vue({ el: '#ap....


在组件上去监听事件时，我们监听的是组件的自动触发的自定义事件，如：
    <div id="app">
        <a-cmp @click='handleClick'></a-cmp>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                handleClick() {
                    alert('click');
                }
            },
            components: {
                'a-cmp': {
                    template:`
                    <div> child </div>
                    `
                }
            }
        })
    </script>
当我们点击child的时候，是不会执行click的点击事件的，因为我们在a-cmp监听的是自定义事件，并不是原生的click事件。
那么要如何监听组件的原生事件呢？
1.使用this.$emit() 
    <div id="app">
        <a-cmp @change='handleClick'></a-cmp>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                handleClick() {
                    alert('click');
                }
            },
            components: {
                'a-cmp': {
                    template:`
                    <div @click='handleClick'> child </div>
                    `,
                    methods: {
                        handleClick() {
                            console.log('组件');
                            this.$emit('change');
                        }
                    }
                }
            }
        })
    </script>
如果一个简单的点击事件，需要执行两次函数，就感觉有点冗余了，而且性能开销比较大。
而在一些情況下，我们可能想要在一个组件的根元素上直接监听一个原生事件。那么就需要使用下面的方法来解决了。
2.使用v-on指令的修饰符 .native
    <div id="app">
        <a-cmp @click.native='handleClick'></a-cmp>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                handleClick() {
                    alert('click');
                }
            },
            components: {
                'a-cmp': {
                    template:`
                    <div> child </div>
                    `,
                }
            }
        })
    </script>
可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

收起

展开全文

vue组件如何绑定原生事件

2020-12-26 21:18:30

vue组件绑定原生事件必须加上.native修饰符才能响应事件 <back-top @click.native="backClick"/>

vue组件绑定原生事件必须加上.native修饰符才能响应事件
如果没有使用，会认为监听的是来自组件自定义的事件，等同于在子组件中：子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn)
    <back-top @click.native="backClick"/>

收起

展开全文

vue组件绑定原生事件

2018-05-13 18:12:00

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8...


    
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <child @click="handleClick"></child><!--这个click为自定义事件-->
10         </div>        
11         
12         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
13         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
14         <script>
15             Vue.component('child', {                
16                 template: '<div @click="handleChildClick">child</div>',
17                 methods: {
18                     handleChildClick: function() {
19                         alert('child click');
20                         this.$emit('click');//绑定一个自定义click事件
21                     }
22                 }
23             })
24             var app = new Vue({
25                 el: '#app',
26                 methods: {
27                     //父组件接收到绑定的handleClick事件
28                     handleClick: function() {
29                         alert('click');
30                     }
31                 }
32             })
33             //整体先弹出child click,再弹出click
34         </script>
35     </body>
36 </html>

 
添加.native表示绑定原生事件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <child @click.native="handleClick"></child><!--添加.native表示绑定原生事件-->
10         </div>        
11         
12         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
13         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
14         <script>
15             Vue.component('child', {                
16                 template: '<div>child</div>',                
17             })
18             var app = new Vue({
19                 el: '#app',
20                 methods: {
21                     handleClick: function(){
22                         alert('click')
23                     }
24                 }
25             })
26         //弹出click
27         </script>
28     </body>
29 </html>

 

转载于:https://www.cnblogs.com/1032473245jing/p/9032851.html

收起

展开全文

Vue给组件绑定原生事件
2020-09-14 21:25:35
给组件绑定原生事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
收起
Vue如何绑定原生事件
2018-09-20 18:46:39
收起
vue中组件绑定原生事件不生效
2020-12-24 19:48:11
如果在组件中，遇到绑定原生事件（click等事件）不生效的话，在事件后面+.native即可生效原理：有些element ui中的组件可以绑定原生事件，但有些组件是无法绑定原生事件的，如果element ui 中有提供组件的事件即可...
收起
vue 给组件绑定原生事件
2021-02-12 16:45:50
通过事件修饰符@click.native 给组件绑定原生事件 父组件home <template> <div> <h1>home组件</h1> <child1 @click.native="change(2)"></child1> <p>total: {{...
收起
vue 自定义组件绑定原生事件
2020-04-16 18:27:21
在自定义组件（Article.vue）的根元素上监听一个原生事件和在 html 原生标签上监听一个原生事件是有区别的，请看下面的例子： App.vue 中：  <Article v-for=...
收起
Vue 给组件绑定原生事件
2018-10-14 21:55:26
给一个组件绑定原生事件，如下方法是错误的！ <div id="root"> <child @click="handleClick"></child> </div> <script...
收起
vue学习笔记之给组件绑定原生事件操作示例
2020-10-15 14:33:29
主要介绍了vue学习笔记之给组件绑定原生事件操作,结合实例形式详细分析了vue.js组件绑定原生事件相关原理、实现方法与操作注意事项,需要的朋友可以参考下
收起
Vue：给组件绑定原生事件
2019-11-21 00:58:35
如何给组件绑定原生事件 其实方法很简单，只需要在@click加上native -->@click.native,即可给组件绑定原生事件 <div id="app"> <child @click.native="hdclick"></child> </div> ...
收起
组件
Vue-native绑定原生事件
2018-04-19 13:15:00
意思就是当你给一个vue组件绑定事件时候，要加上native！如果是普通的html元素！就不需要 <div id = "app"> <my-component @click="i_said"></my-component> </div> Vue.component...
收起
4-4 Vue 给组件绑定原生事件
2020-05-22 22:36:59
4-4 Vue 给组件绑定原生事件</title> <script src="vue.js"></script> </head> <body>  <div id="app"> <...
收起
vue给组件绑定原生事件初步理解
2020-10-27 21:38:53
<!... <... <head>...meta charset="UTF-8">...给组件绑定原生事件</title> <script src='./vue.js'></script> </head> <body> <div id="root"> <child @
收起
Vue-给组件绑定原生事件
2020-05-13 17:49:40
如果想触发自定义的click事件，就得在子组件里对元素进行事件绑定，这个事件才是真正的原生事件。在元素上绑定的事件，监听的是原生事件 在组件上绑定的事件，监听的是自定义事件，需要用this.$emit()来触发。也...
收起
vue将原生事件绑定到组件
千次阅读 2019-05-06 11:44:03
首先我们定义一个 child 组件，什么事件都不绑定，代码如下： Vue.component('child', { template: '<button>click me</button>' }) // 然后我们在根组件中使用它，代码如下： <div id="app"> ...
收起
vue 给组件绑定自定义事件无效之加上native绑定原生事件
2020-11-10 09:44:27
1，给组件绑定自定义事件，点click没反应 <div id="root"> <child @click="handleClick"></child>//组件上进行的事件的绑定是自定义事件，监听自定义事件 </div> <script> var vm =...
收起
vue中JSX绑定原生事件
千次阅读 2020-04-30 17:29:33
用的是：nativeOnClick { this.navList && this.navList.map((it, index) => <router-link tag={ 'span' } to={ { path: it.path } } class={ `${ styles.item } ${ this.currentNavIndex...
收起
Vue给组件绑定原生事件(demo)
2020-04-04 10:18:04
<!DOCTYPE html> <... <head> ...meta charset="utf-8">...给组件绑定原生事件</title> <script src="./vue.js"></script> </head> <body> <...
收起

vue绑定原生事件

vue绑定点击事件@click_复习之给Vue组件绑定原生事件（v-on修饰符.native）

那么要如何监听组件的原生事件呢？

vue组件如何绑定原生事件

vue组件绑定原生事件必须加上`.native`修饰符才能响应事件

如果没有使用，会认为监听的是来自组件自定义的事件，等同于在子组件中：子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn)

vue组件绑定原生事件

Vue给组件绑定原生事件

Vue如何绑定原生事件

vue中组件绑定原生事件不生效

vue 给组件绑定原生事件

vue 自定义组件绑定原生事件

Vue 给组件绑定原生事件

vue学习笔记之给组件绑定原生事件操作示例

Vue：给组件绑定原生事件

Vue-native绑定原生事件

4-4 Vue 给组件绑定原生事件

vue给组件绑定原生事件初步理解

Vue-给组件绑定原生事件

vue将原生事件绑定到组件

vue 给组件绑定自定义事件无效之加上native绑定原生事件

vue中JSX绑定原生事件

Vue给组件绑定原生事件(demo)

vue绑定原生事件