vue event 自定义事件

子组件要把数据传递给父级 依靠自定义事件

 

自定义事件

 监听$on(eventName)

   触发$emit(eventName)

基本使用方法如下

使用app.$on('text',function(){})来自定义一个事件，实例中我使用click点击事件来触发addn 中的 app.$emit('text')给事件传递参数'hi';

app.$on监听到text 执行打印  value

  
        
  
            
{{pn}}
  
        
  
      
      

 

给予这个机制 父级组件就可以将父级组件的信息传递给自己组件

  
        
  
            
{{pn}}
  
              
        
  
      
      

 

上图为先点击,在点击<div @click="addn">{{pn}}

执行结果

这就实现了父级组件监听子级事件，通过事件可以将父级的数据传递给子集

  
        
  
            
{{pn}}
  
              
              
        
  
      
      

以$on(eventName)和$emit(eventName)配合使用时，须注意的是vue的事件运行类似浏览器的事件运行机制

所有从可以使用浏览器的类似事件机制

通过将子级组件的触发函数绑定到父级的事件上

 可以理解为触 发父级组件事件的时候绑定了子集的方法函数addn()

换成你熟悉的事件就是

;

但是触发myevent 是

{{mes}}

的click myevent方法中触发