vue中 props 设置default得作用

最新推荐文章于 2025-09-24 08:19:54 发布
原创 最新推荐文章于 2025-09-24 08:19:54 发布 · 7.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客提到default可用于设置默认值，当没有任何值时，会采用其设置的默认值。 



default里面设置得原来是没有任何值的时候默认的值


                

        

    


  



    



                



	

		

			

				
					
vue中组件的props属性（详）

				
			

			

				

					蜗牛~~
				

				

					10-28
					
					18万+
					
				

			

		

		

			
				
今天这篇文章，让你彻底学会props属性……

props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。




			
		

	



                

            
              



	

		

			

				
					
20-Vue中props设置default的作用

				
			

			

				

					anxikang5491的博客
				

				

					07-15
					
					2466
					
				

			

		

		

			
				
已经解决：原以为default是传入的值不符合类型要求，之后默认的值。原来是没有任何值的时候默认的值
保证你需要用到该属性的时候不会为undefined

转载于:https://www.cnblogs.com/Romantic-Blood/p/11186790.html...

			
		

	



              


  
  
              

                


	

		

			

				
					
ElementUI【一】elementUI组件库默认插槽的使用（#default）

				
			

			

				

					小祥编程擅长前端
				

				

					02-03
					
					6766
					
				

			

		

		

			
				
ElementUI【一】elementUI组件库默认插槽的使用（#default）。在使用elementUI组件库的时候，经常遇见组件带有默认插槽，带有默认插槽的需要我们改写，因为在接下来的删除、添加等功能中函数需要传参，尤其是老版本的ElementUI组件使用的是老版本的插槽。

			
		

	





	

		

			

				
					
Vue3 中的 Props用法：父子组件通信的核心机制

					
最新发布

				
			

			

				

					Rysxt_的博客
				

				

					09-24
					
					1557
					
				

			

		

		

			
				
通过validator函数实现更复杂的验证逻辑（如值的范围、格式等）。函数接收 prop 值作为参数，返回true（有效）或false（无效），无效时会抛出警告。age: {return value >= 0 && value <= 150 // 年龄必须在 0-150 之间},status: {return ['active', 'inactive', 'pending'].includes(value) // 状态必须是这三个值之一})在。

			
		

	



		

			
		



	

		

			

				
					
vue3踩坑之作用域插槽的使用，以及vue3和vue2中作用域插槽的对比和使用

				
			

			

				

					Wzmlzrr的博客
				

				

					04-20
					
					3885
					
				

			

		

		

			
				
项目场景：
在系统后台开发中，前端需要对后端返回数据进行处理，比如说，用户角色、付款方式等等，而返回的这些数据里面通常是数字来表示相关的角色和身份，如：1表示管理员，2表示用户；又比如说1表示支付宝支付，2表示微信支付，3表示银行卡支付。页面上渲染出数据是数字的形式，但对用户来说其实这种方式并不具备明显的指代意义，所以为了实现更好的用户体验，前端会使用作用域插槽对该数据进行处理，实现与用户之间更好的交互，以下案例中使用el-tag标签来指代上述提到的数据。

开发场景
vue2对作用域插槽的使用，渲染不同的

			
		

	





	

		

			

				
					
vue2中的prop设置default有什么用？

				
			

			

				

					有问题可关注公众号：前端研究院     后台输入问题回复
				

				

					08-01
					
					1万+
					
				

			

		

		

			
				
 
  不明白为啥prop里面还写个default 
  百度了下，恍然大悟 
  代码如上《感觉default没什么用啊，也没什么提示和效果。 
已经解决：原以为default是传入的值不符合类型要求，之后默认的值。原来是没有任何值的时候默认的值

保证你需要用到该属性的时候不会为undefined

默认值啊，因为你传了num和num2到两个prop中，所以默认值被覆盖了

已经解决：原以为d...

			
		

	





	

		

			

				
					
React 组件的默认状态（defaultProps）

				
			

			

				

					YY383803220的博客
				

				

					11-30
					
					1356
					
				

			

		

		

			
				
基本类型组件：
class MyComponent extends React.Component {
    constructor(props){
        super(props);
        this.state={
            name:props.name
        };
    }
}

MyComponent.defaultProps={
 ...

			
		

	





	

		

			

				
					
Vue props中Object和Array设置默认值操作

				
			

			

				

					10-15
				

			

		

		

			
				
现在让我们深入到具体的代码实例中去理解和掌握如何在Vue.js中为对象和数组类型的props设置默认值。  首先，当我们需要为对象类型的props设置默认值时，应该如下写：  ```javascript props: {  seller: {  type: ...

			
		

	





	

		

			

				
					
浅谈vue-props的default写不写有什么区别

				
			

			

				

					10-14
				

			

		

		

			
				
主要介绍了浅谈vue-props的default写不写有什么区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
解决vue prop传值default属性如何使用,为何不生效的问题

				
			

			

				

					10-14
				

			

		

		

			
				
如果prop的值不符合其声明的类型，Vue会在控制台中输出警告信息，但是这不会影响到default属性的使用，default属性的值只有在props未被显式传递时才会使用。  总而言之，在Vue中使用prop的default属性需要了解其工作...

			
		

	





	

		

			

				
					
vue props接收default

				
			

			

				

					mrzhangdulin的博客
				

				

					09-07
					
					6380
					
				

			

		

		

			
				
当在父组件通过props传Array/Object类型值给子组件的时候，如果子组件的props接收default为  
exampleData:{  
type:Array,  
default:[]  
}时，系统会报错Invalid default value for prop “slides”: Props with type Object/Array must use a factory ...

			
		

	





	

		

			

				
					
Props中的default

				
			

			

				

					YoungtiNine的博客
				

				

					11-16
					
					7660
					
				

			

		

		

			
				
1. 默认使用
props: {
	obj: {
		type:Object,
		default:() => ({})
	},
 	arr: {
      type:Array,
      default:() => ([])
  	}
}

2. 为什么需要通过函数的形式
因为对象和数组都是属于我们的复杂类型，在进行访问指向的时候我们使用的是对象和数组的地址，而不像基础数据类型那。
如果我们没有通过函数的形式去设置对象和数据类型的默认值，而是直接采用{}和[],如果多个使用该组件的地方因

			
		

	





	

		

			

				
					
vue props default 数组/对象的默认值

				
			

			

				

					勋勋勋勋小勋勋的博客
				

				

					04-03
					
					7114
					
				

			

		

		

			
				
数组
data: {
    default: () => []
} 

对象
data: {
    default: () => ({})
} 




			
		

	





	

		

			

				
					
Props中default用法及踩坑记录

				
			

			

				

					michiko98的博客
				

				

					04-12
					
					2245
					
				

			

		

		

			
				
简单的说就是在 props-default里面无法引用到 data的数据，所以修改的时候要把data数据复制到default处。同时也要注意用一个工厂函数去返回数组或者对象。用data中的变量，为props赋默认值，尝试多种方法都失败。父组件未向子组件传参数arrList的情况下，一直获取不到default的值。（注意事项已在注释中说明）

			
		

	





	

		

			

				
					
vue3 props设置default

				
			

			

				

					weixin_45825057的博客
				

				

					09-13
					
					770
					
				

			

		

		

			
				
/ 除了验证是否符合type的类型，此处再判断该值结果是否符合验证。

			
		

	





	

		

			

				
					
Vue2-count组件声明props自定义属性

				
			

			

				

					tq040626的博客
				

				

					07-07
					
					250
					
				

			

		

		

			
				
1、props是组件的自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性。

			
		

	





	

		

			

				
					
React state 和 props总结 defaultProps(默认参数） 不可以在组件内部对props进行修改

					
热门推荐

				
			

			

				

					徐同保的专栏
				

				

					10-09
					
					1万+
					
				

			

		

		

			
				
我们来一个关于 state 和 props 的总结。

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是...

			
		

	





	

		

			

				
					
Prpos中default的用法

				
			

			

				

					云散的博客
				

				

					07-26
					
					1003
					
				

			

		

		

			
				
props中default的使用

			
		

	





	

		

			

				
					
React学习系列十propTypes  defaultProps

				
			

			

				

					每天进步一点点儿
				

				

					12-12
					
					749
					
				

			

		

		

			
				
都是定义在子组件里面的

defaultProps

父子组件传值中，如果父组件调用子组件的时候不给子组件传值，则可以在defaultProps中定义默认值

propTypes

验证父组件传值的类型合法性


import PropTypes from 'prop-types'

class Demo extends React.Compenent{

...

}

Demo.propTyp...

			
		

	





	

		

			

				
					
vue中props设置

				
			

			

				

					03-29
				

			

		

		

			
				
在Vue中设置props有以下几个步骤： 1. 在子组件中定义props属性：在子组件的选项中，使用props属性来定义需要接收的数据。可以是一个数组或对象，数组中的每个元素表示一个需要接收的属性，对象中的key表示属性名，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值