【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组件的理念:父子组件如何通过事件进行通信

5、父子组件如何通过事件进行通信

子组件调用的方法让父组件处理

子组件调用父组件的方法来改变父组件的数据。子组件无法改变父组件传过来的数据,可以通过此方法请求父组件来进行改变!





  
  
  
  hello vue
  
  



  

运行结果

image-20210613145446569.png

子组件调用父组件的方法并传参数





  
  
  
  hello vue
  
  



  

运行结果

image-20210613150236756.png

在子组件中计算出来后上传给父组件参数





  
  
  
  hello vue
  
  



  

运行结果

image-20210613150548226.png

校验子组件对外触发的事件

在子组件里面写一个 emits: ['方法名'] 来实现校验,因为当子组件里面的内容太多的话就影响可读性,把对外触发的事件全写在这里面有助于阅读!





  
  
  
  hello vue
  
  



  

运行结果

image-20210613154043173.png

更多的校验





  
  
  
  hello vue
  
  



  

运行结果

image-20210613154340970.png

父子组件之间的”双向绑定“





  
  
  
  hello vue
  
  



  

运行结果

image-20210613154959373.png

自定义modelValue





  
  
  
  hello vue
  
  



  

运行结果

image-20210613155101659.png

你可能感兴趣的:(【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组件的理念:父子组件如何通过事件进行通信)