精华内容
下载资源
问答
  • 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>
    
    展开全文
  • 在组件上去监听事件时,我们监听的是组件的自动触发的自定义事件,如: <div id="app"> <a-cmp @click='handleClick'></a-cmp> </div> <script> const vm = new Vue({ el: '#ap....

    bd5ff8d2c7e55b50bbe7b4643053fb49.png

    在组件上去监听事件时,我们监听的是组件的自动触发的自定义事件,如:

        <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组件绑定原生事件必须加上.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

    展开全文
  • 给组件绑定原生事件 <!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
  • 如果在组件中,遇到绑定原生事件(click等事件)不生效的话,在事件后面+.native即可生效 原理: 有些element ui中的组件可以绑定原生事件,但有些组件是无法绑定原生事件的,如果element ui 中有提供组件的事件即可...
  • 通过事件修饰符@click.native 给组件绑定原生事件 父组件home <template> <div> <h1>home组件</h1> <child1 @click.native="change(2)"></child1> <p>total: {{...
  • 在自定义组件(Article.vue)的根元素上监听一个原生事件和在 html 原生标签上监听一个原生事件是有区别的,请看下面的例子: App.vue 中: <!-- 给自定义组件添加点击事件 print --> <Article v-for=...
  • 给一个组件绑定原生事件,如下方法是错误的! &lt;div id="root"&gt; &lt;child @click="handleClick"&gt;&lt;/child&gt; &lt;/div&gt; &lt;script...
  • 主要介绍了vue学习笔记之给组件绑定原生事件操作,结合实例形式详细分析了vue.js组件绑定原生事件相关原理、实现方法与操作注意事项,需要的朋友可以参考下
  • 如何给组件绑定原生事件 其实方法很简单,只需要在@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 给组件绑定原生事件</title> <script src="vue.js"></script> </head> <body> <!-- 1.native 定义原生事件,不是自定义组件事件 --> <div id="app"> <...
  • <!... <... <head>...meta charset="UTF-8">...给组件绑定原生事件</title> <script src='./vue.js'></script> </head> <body> <div id="root"> <child @
  • 如果想触发自定义的click事件,就得在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。 在元素上绑定的事件,监听的是原生事件 在组件上绑定的事件,监听的是自定义事件,需要用this.$emit()来触发。 也...
  • vue原生事件绑定到组件

    千次阅读 2019-05-06 11:44:03
    首先我们定义一个 child 组件,什么事件都不绑定,代码如下: Vue.component('child', { template: '<button>click me</button>' }) // 然后我们在根组件中使用它,代码如下: <div id="app"> ...
  • 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...
  • <!DOCTYPE html> <... <head> ...meta charset="utf-8">...给组件绑定原生事件</title> <script src="./vue.js"></script> </head> <body> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 652
精华内容 260
关键字:

vue绑定原生事件

vue 订阅