【Vue3 从入门到实战 进阶式掌握完整知识体系】012-探索组件的理念:单向数据流的理解

3、单向数据流的理解

传多个参数的情况





  
  
  
  hello vue
  
  



  

运行结果

image-20210613125233430.png

简化传多个参数的写法





  
  
  
  hello vue
  
  



  

运行结果

image-20210613125622108.png

关于属性名

属性名如果是多个单词,建议使用 - 分割,html属性名不支持大写,会自动转换成小写!





  
  
  
  hello vue
  
  



  

运行结果

image-20210613130158946.png

单向数据流

子组件无权改变父组件传递过来的数据





  
  
  
  hello vue
  
  



  

运行结果

image-20210613130550889.png

解决无法更改父组件传递过来的数据的问题

子组件无法改变父组件传递过来的数据,子组件可以自定义一个属性,将父组件传过来的数据赋值给自定义的属性,然会对自定义的属性进行更改





  
  
  
  hello vue
  
  



  

运行结果

image-20210613131028364.png

为什么自组件不能改父组件的数据

因为如果子组件能更改父组件的数据,其他使用该数据的组件里面使用的数据也会随之更改,那么每个组件之间就相互影响了!

你可能感兴趣的:(【Vue3 从入门到实战 进阶式掌握完整知识体系】012-探索组件的理念:单向数据流的理解)