精华内容
下载资源
问答
  • vue组件如何绑定原生事件
    2020-12-26 21:18:30

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

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

        <back-top @click.native="backClick"/>
    
    更多相关内容
  • 今天小编就为大家分享一篇vue绑定事件后获取绑定事件中的this方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue绑定原生事件

    2018-12-20 22:12:33
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&...vue不使用绑定原生事件&lt;/title&gt; &lt;script src="vue.js"&gt;&lt;/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>
    
    展开全文
  • 给组件绑定原生事件:.native 1、在组件标签上绑定的事件是自定义事件,在组件模板里绑定的事件才是原生的事件。(自定义事件可以通过在子组件中通过this.$emit去触发,但是这样太麻烦) <div id="root"> <...

    给组件绑定原生事件:.native

    1、在组件标签上绑定的事件是自定义事件,在组件模板里绑定的事件才是原生的事件。(自定义事件可以通过在子组件中通过this.$emit去触发,但是这样太麻烦)

    <div id="root">
           <!-- 监听自定义事件 -->
           <child @click="handleClick"></child>
        </div>
        <script>
        Vue.component('child',{
           //元素上绑定的是监听原生事件
           template:'<div @click="handlechildClick">child</div>',
           methods:{
           	handlechildClick:function(){
           		// 子组件想触发父组件的监听事件,
           		// 方法一、通过$this.$emit,缺点:步骤复杂
           		this.$emit('click')
           	}
           }
        })
        var vm = new Vue({
            el:'#root',
            methods:{
            	handleClick:function(){
            	    alert('已触发父组件监听')//子组件通过$emit绑定后,可以出发父组件的监听
            	}
            }
        })
     </script>
    

    2、给组件标签上的事件添加‘.native’修饰符,就可以使事件变为原生点击事件而不再是自定义事件。

     <div id="root">
           <!-- 方法二:后面加.native,可以给组件绑定原生事件 -->
           <child @click.native="handleClick"></child>
     </div>
    
    展开全文
  • 如果想触发自定义的click事件,就得在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。 在元素上绑定的事件,监听的是原生事件 在组件上绑定的事件,监听的是自定义事件,需要用this.$emit()来触发。 也...

    当我给一个组件绑定一个事件的时候,实际上这个事件绑定的是自定义的事件,也就是你真正的鼠标点击触发的事件,并不是我绑定的click事件。

    所以在下面这个例子里,点击子组件,并不会有弹窗提示。
    在这里插入图片描述
    如果想触发自定义的click事件,就得在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。

    • 在元素上绑定的事件,监听的是原生事件
    • 在组件上绑定的事件,监听的是自定义事件,需要用this.$emit()来触发。

    也就是酱婶的:
    在这里插入图片描述
    在开发的过程中这样写有点太麻烦,假如我有这样的需求,我就想在子组件上监听原生的事件,该怎么做呢?

    只要在事件绑定的后面加上一个native这样的事件修饰符就可以了。

    <div id="root">
            <child @click.native="handleClick"></child>
        </div>
        <script>
            Vue.component('child',{
                template:'<div>click</div>'
            })
            var vm = new Vue({
                el:"#root",
                methods: {
                    handleClick(){
                        alert('click')
                    }
                },
            })
        </script>
    
    展开全文
  • Vue如何绑定原生事件

    2018-09-20 18:46:39
  • vue之 如何在组件上绑定原生事件

    千次阅读 2019-06-26 14:29:24
    由于组件上面的事件默认为自定义事件,那么此例中&...不会被系统识别为我们理解中的点击事件必须通过$emit方法绑定它才行。 <body> <div id="root"> <child @click="handleClick"></child...
  • 主要介绍了vue学习笔记之给组件绑定原生事件操作,结合实例形式详细分析了vue.js组件绑定原生事件相关原理、实现方法与操作注意事项,需要的朋友可以参考下
  • 因为vue有自己事件运行机制,子组件son不是原生DOM元素,我们是无法直接给其绑定原生事件并触发的。 解决方法: 使用native修饰符 使用$emit分发事件 使用$listeners 一: 仅需要在click事件后加上.n
  • 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...
  • &lt;!...gt;...绑定原生组件&lt;/title&gt; &lt;script type="text/javascript" src="vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt
  • 如果在组件中,遇到绑定原生事件(click等事件)不生效的话,在事件后面+.native即可生效 原理: 有些element ui中的组件可以绑定原生事件,但有些组件是无法绑定原生事件的,如果element ui 中有提供组件的事件即可...
  • Taro + vue 绑定小程序原生事件 // 在对应的页面里 // 上拉刷新 Taro.Current.page.onPullDownRefresh = function() {} // 触底加载 Taro.Current.page.onReachBottom = function() {} // 分享 Taro.Current.page...
  • Vue组件绑定原生事件 下面是Vue组件中内容,了解一下,给组件绑定原生事件是个什么样子 下面点击不会弹出HandleClick,具体代码如下 <body> <!-- 这里点击child是不会弹出HandleClick,需要对template绑定原始...
  • <!DOCTYPE html> <... <head> ...meta charset="UTF-8">...给组件绑定原生事件</title> <script src="./vue.js"></script> </head> <body> <div i...
  • 由于组件上面的事件默认为自定义事件,...这样组件内外都要定义方法未免有点麻烦,那么想在组件上直接使用原生事件怎么办?给事件加个后缀.native就行: 显然,我们推荐第二种方法,代码少了不是一行两行啊~ ...
  • 在一个组件的根元素上直接监听一个原生事件。 你可以使用 v-on 的 .native 修饰符: <base-input v-on:focus.native="onFocus"></base-input> 监听的是非根原生,Vue 提供了一个 $listeners property...
  • 本篇文章主要介绍了vue动态生成dom并且自动绑定事件,具有一定的参考价值,有兴趣的可以了解一下。
  • 由于组件上面的事件默认为自定义事件,那么此例中&...不会被系统识别为我们理解中的点击事件必须通过$emit方法绑定它才行。 <body> <div id="root"> <child @click="handleClick"></child&g...
  • Vue3】事件绑定

    2022-03-14 12:53:06
    原生 html + js 的项目中,如果需要给一个元素添加一个鼠标点击事件,可以在 DOM 上使用 onclick 来绑定一个事件。 在 Vue 的模板语法中,可以用 v-on 指令监听 DOM 事件,并在触发事件时执行一些 JavaScript。...
  • 绑定原生事件 &lt;div id="root"&gt; &lt;child @click="handleClick"&gt;&lt;/child&gt; &lt;/div&gt; Vue.component('child',{ template:'&lt;div @...
  • 1、click后加上.native就可 <my-button @click.native="handleClick"&...Vue.component('my-button',{ template:` <button>点击</button> ` }) var vm = new Vue({ el:'#demo', data:{ }, m
  • vue.js给自定义组件绑定原生事件

    千次阅读 2018-11-08 10:53:21
    vue.js给自定义组件绑定原生事件 .native修饰符 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on 的 .native 修饰符: &lt;base-input v-on:focus.native="onFocus&...
  • vue中v-bind是用来绑定属性的,v-on则是用来绑定事件的,在原生中,事件是这样写的 1、直接在元素中使用属性绑定事件 <input type="button" οnclick="add()" /> function add(){ ............ } 2、先...
  • 通过事件修饰符@click.native 给组件绑定原生事件 父组件home <template> <div> <h1>home组件</h1> <child1 @click.native="change(2)"></child1> <p>total: {{...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,181
精华内容 10,872
关键字:

vue绑定原生事件