【vue】$event的理解

一、在原生dom事件里就是事件对象

注意两点

1.不使用圆括号，event被自动当作实参传入

2.使用圆括号，必须显式的传入event对象，如果不传入可能最终找到的是全局的window .event

  Submit





// ...

methods: {

  warn: function (message, event) {

    // 用来阻止默认事件

    if (event) event.preventDefault()

    alert(message)

  }

}

 

二、自定义事件组件，就是$ emit 的第一个参数

 

 

vue中事件绑定v-on，简写可以写作@

 

 

例子一：

 

（1）vue组件发出自定义事件，这个是带参的，不带参数的去掉后边的book

       


            


                
  

                
{{book.title}}

                
{{book.authors | join }}

            

        

（2）组件自定义事件在“页面”的响应，对应一个页面中的方法，这里包含传参，如果不传，一个字符串就可以了

        


            

            对应的方法：
 
  
 
  
 
 
  
 
 
  
例子二：在input组件中起到的作用也差不多，相当于传入的第一个参数
 
  
组件内：
 
  
 
  
 
  
 
 
  
 
  
 
  
⚠️：因为使用了element所以这里要加一个native
 
  
 
 
  
 
 
  
外部绑定
 
  
 
  
          @search="terms=$event">
 
  
 
 
  
          
 
  
 
 
  
 
 
  
    export default {
 
  
      name: 'App',
 
  
      data(){
 
  
        return{
 
  
          terms:"",
 
  
        }
 
  
      },
 
  
 
 
  
      components:{
 
  
        MySearch,
 
  
      },
 
  
    }
 
  
 
 
  
⚠️：v-on也可以在触发的时候运行一些代码，向上边的赋值，以及像这样的小逻辑"counter += 1">Add 1