Vue学习笔记4.4 绑定原生事件

痛定思痛。 2022-03-22 20:38 306阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>绑定原生组件</title>
  5.     <script type="text/javascript" src="vue.js"></script>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <!-- 1直接这样使用原生click是没用的因为浏览器会将此click当做自定义事件来处理 -->
  10.         <child @click="handleClick"></child>
  11.             <!-- 3.第二个方法就是使用.native参数。这样就可以直接使用原生事件。就不用再像第一个方法那样写那么多东西了 -->
  12.         <child @click.native="handleChangeClick"></child>
  13.     </div>
  14. </body>
  15. <script>
  16.     Vue.component('child', {
  17.         template: '<div @click="handleClick">Child</div>',
  18.         methods: {
  19.             // 2.如果想要使用原生事件。有2个方法，第一个就是使用$emit触发
  20.             // handleClick: function() {
  21.             //     alert('click click')
  22.             //     this.$emit('abc')
  23.             // }
  24.         }
  25.     })
  26.     var vm = new Vue({
  27.         el:'#app',
  28.         methods: {
  29.             handleClick: function() {
  30.                 alert('click')
  31.             },
  32.             handleChangeClick: function() {
  33.                 alert('new click')
  34.             }
  35.         }
  36.     })
  37. </script>
  38. </html>

发表评论

表情：
评论列表 （有 0 条评论，306人围观）

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

相关阅读

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

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

    比眉伴天荒比眉伴天荒/ 0 赞/ 320 阅读