vue父组件怎么给子组件传值（vue中props设置默认值-父组件给子组件传值的写法——简略、带类型、带类型和默认值、带校验）

vue中props设置默认值-父组件给子组件传值的写法——简略  
  
  
  
  
  
  、带类型 
  
  
  
  
  
  
 、带类型和默认值


 


 


 


 


 


 


、带校验

1 
 
 
 
 
 
 、父子间传值 父传子 在子组件使用 props 选项接收父组件的数据  
  
  
  
  
  
  。 <!-- 父组件 --> <template> <div><com-child :value="父组件数据"></com-child></div> </template>

2

<!-- 子组件 --> <template> <div> {{value}} </div> </template> <script> export default { // 父传子数据特点 只读 props:[value] //写法一 } </script> 2  
   
   
   
   
   
   
 、props写法汇总 // 写法一：常规写法 props:[value] //写法二：带有类型写法 props: { fieldString: String, fieldNumber: Number, fieldBoolean: Boolean, fieldArray: Array, fieldObject: Object, fieldFunction: Function } // 写法三：带有类型和默认值写法 props: { fieldString: { type: String, default: }, fieldNumber: { type: Number, default: 0 }, fieldBoolean: { type: Boolean, default: true }, fieldArray: { type: Array, default: () => [] }, fieldObject: { type: Object, default: () => ({}) }, fieldFunction: { type: Function, default: function () { } } } 2.1

 

 

 

 

 

 

、props简略写法

一般情况下

props写法 props：{ obj: { type: Object, default: () => {} }, arr: { type: Array, default: () => [] } }

但是  
  
  
  
  
  
  ，如果初始化的时候就使用里面的值 
  
  
  
  
  
  
 ，可能会出现没有该值的情况


 


 


 


 


 


 


，此时就会报错 
  
  
  
  
  
  
 。

应该使用以下有默认值的写法 props：{ obj: { type: Object, default: function () { return { obje: } } }, arr: { type: Array, default: function () { return [] } } } 2.2
 

 

 

 

 

 

 、带有校验的写法

我们可以为组件的 prop指定验证要求 
 
 
 
 
 
 ，例如你知道的这些类型


 


 


 


 


 


 


。如果有一个需求没有被满足  
   
   
   
   
   
   
 ，则 Vue 会在浏览器控制台中警告你 
 
 
 
 
 
 。

这在开发一个会被别人用到的组件时尤其有帮助  
   
   
   
   
   
   
 。

props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: hello } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return [success, warning, danger].indexOf(value) !== -1 } } } 3              、示例

vue中prop会接收不同的数据类型**

 

 

 

 

 

 

，这里列出了 常用的数据类型的设置默认值的写法,其中包含：Number, String, Boolean, Array, Function, Object

 

 

 

 

 

 

。

refAge: { type: Number, default: 0 // 数字类型
 

 

 

 

 

 

 ，默认0 }, refName: { type: String, default: // 字符串类型              ，默认 }, hotDataLoading: { type: Boolean, default: false // 布尔类型
 

 
 

 
 

 
 

 
 

 
 

 
 

，默认false }, hotData: { type: Array, default: () => { return [] // 数组类型












，默认[] } }, getParams: { type: Function, default: () => () => {} // 函数类型                     ，默认{} }, meta: { type: Object, default: () => ({}) // 对象类型
 
 
 
 
 
 
 
 
 
 
 
 
 
，默认{} }