vue2 基础学习08（给组件绑定原生事件）

• 在组件上设置点击事件

   <div id="app"  >
          <child @click="handleClick"></child>
      </div>
  
      <script>
        
          Vue.component('child',{
              template:`<div>Child</div>`
          }),
          new Vue({
              el:'#app',
              methods:{
                  handleClick(){
                      alert('click')
                  }
              }
          })
  
      </script>

  显然在Root组件中不能被触发，因为这时候 组件child上的click相当于自定义的一个事件，这时候需要通过this.$emit去触发自定义事件

      <div id="app"  >
          <child  @click="handleClick"></child>
      </div>
  
      <script>
        
          Vue.component('child',{
              template:`<div  @click="handleClick">Child</div>`,
              methods:{
                  handleClick(){
                      this.$emit('click')
                  }
              }
          }),
          new Vue({
              el:'#app',
              methods:{
                  handleClick(){
                      alert('click')
                  }
              }
          })
  
      </script>

  这时候就实现了点击事件，但是究其根本，这还是自定义事件，太过麻烦。

• 给组件绑定原生事件

  非常简单：只要在事件绑定后面加上.native 的修饰符就可以了

   <div id="app"  >
          <child  @click.native="handleClick"></child>
   </div>
  
   <script>
          Vue.component('child',{
              template:`<div >Child</div>`,
          }),
          new Vue({
              el:'#app',
              methods:{
                  handleClick(){
                      alert('click')
                  }
              }
          })
   </script>