props父子传参父组件传递多个参数给子组件

父组件可用通过v-bind传递一个对象，把props所有的属性传给子组件

  1. <Dbutton v-bind="{content:'abc',name:'button'}" />
  2. // =========       
  3. props:{
  4.             content:{
  5.                 type:String, 
  6.                 default(){
  7.                     return '缺省内容'
  8.                 },
  9.             },
  10.             name:{
  11.                 type:String,
  12.                 default(){
  13.                     return 'hhh'
  14.                 }
  15.             }
  16.         },

props的校验

1.required表示这个属性是必传的，布尔值
2 props对象形式设置validator，validator是一个函数，返回一个布尔值，用于参数校验

  1.         props:{
  2.             content:{
  3.                 type:String, 
  4.                 required:true,
  5.                 default(){
  6.                     return '缺省内容'
  7.                 },
  8.                 valodator(data){
  9.                     return ['abc','dec'].includes(data)
  10.                 }
  11.             }
  12.         },

props父传子单向数据流

父组件通过props传递给子组件的属性，子组件只能展示，不能直接修改。如果子组件要修改的话，可以采用初始化赋值的形式，这样props只起到传递作用。

  1. 在data中把props的属性赋值给子组件data数据
  2. 子组件直接修改data数据
    1. <div @click="text = 123"> {{text}}</div>
    2. // ======        
    3. props:{
    4.          content:{
    5.              type:String, 
    6.              default(){
    7.                  return '缺省内容'
    8.              },
    9.          }
    10.      },
    11.      data(){
    12.          return {
    13.              text:this.content
    14.          }
    15.      },