Vue基础——将原生事件绑定到组件

1、click后加上.native就可

<my-button @click.native="handleClick"></my-button>

Vue.component('my-button',{
      template:`
       <button>点击</button>
      `
    })
    var vm = new Vue({
      el:'#demo',
      data:{
      },
      methods:{
        handleClick(){
          console.log("click")
        }
      }
    })

2、使用$emit分发事件

<my-input @focus='handleFocus'></my-input>

 Vue.component('my-input',{
        template:`
        <label for="">
          label:
          <input type="text" @focus='$emit("focus","子组件的value")'>
      </label>
        `
    })
    const vm2 = new Vue({
        el:'#app2',
        methods:{
            handleFocus(value){
              debugger
                console.log('focus...',value)   //focus... 子组件的value
            }
        }
    })

3、$listener

<my-input @focus='handleFocus'></my-input>

 Vue.component('my-input',{
        template:`
        <label for="">
          label:
          <input type="text" @focus='$emit("focus","子组件的value")'>
      </label>
        `
    })
    const vm2 = new Vue({
        el:'#app2',
        methods:{
            handleFocus(value){
              debugger
                console.log('focus...',value)   //focus... 子组件的value
            }
        }
    })