给组件绑定原生事件

组件上绑定原生事件：

1.在父组件绑定事件（@click.native="handle"）

2.在vue实例中的methods定义事件函数

<body>
  <div id="root">
    <child @click.native="handleClick"></child><!-- 加上native为监听原生事件 -->
  </div>
  <script>
    Vue.component('child',{
      template:'<div>Child</div>',
     
    })
    var vm=new Vue({
      el:'#root',
      methods:{
        handleClick:function(){
          alert('click')
        }
      }
    })
  </script>

</body>

 

传统方法绑定事件：

1.在子组件上绑定事件

2.在子组件的methods设置相应的事件函数（原生事件），

将自定义事件通过this.$emit("事件名")传递给父组件。

3.在父组件上绑定从子组件methods函数中传来的自定义事件。

4.在父组件methods中设置对应的事件函数。

<body>
  <div id="root">
    <child @click="handleClick"></child><!-- 自定义事件 -->
  </div>
  <script>
    Vue.component('child',{//全局组件
      template:'<div @click="handleChildClick">Child</div>',//原生事件
      methods:{
        handleChildClick:function(){
          alert('child click')
          this.$emit('click')
        }
      }
    })
    var vm=new Vue({
      el:'#root',
      methods:{
        handleClick:function(){
          alert('click')
        }
      }
    })
  </script>

</body>
posted @ 2019-12-19 17:35  嘘，在学习呢  阅读(357)  评论(0)  编辑  收藏  举报