【Vue3 从入门到实战 进阶式掌握完整知识体系】013-探索组件的理念:Non-Props属性

4、Non-Props属性

概述

当父组件向子组件传的值,子组件没有接收的时候,vue 会把传的值作为子组件最外层 div 的属性;

代码





  
  
  
  hello vue
  
  



  

运行结果

image-20210613142624391.png

阻止这种情况的发生





  
  
  
  hello vue
  
  



  

运行结果

image-20210613142953416.png

子组件最外层多个div实现接收数据

指定一个 div 来接收父组件传过来的数据,否则会报警告,且此时多个 div 都不接收父组件传的数据





  
  
  
  hello vue
  
  



  

运行结果

image-20210613143411259.png

子组件最外层多个div实现接收到父组件所传递他多个属性和值的其中一个





  
  
  
  hello vue
  
  



  

运行结果

image-20210613143838832.png

获取父组件传过来的属性和值





  
  
  
  hello vue
  
  



  

运行结果

image-20210613144201860.png

你可能感兴趣的:(【Vue3 从入门到实战 进阶式掌握完整知识体系】013-探索组件的理念:Non-Props属性)