组件传递Props效验

Vue 组件可以更细致地声明对传入的 props 的校验要求

<template>
  <h3>ComponentA</h3>
  <ComponentB title="Props效验" :userInfo="userInfo"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
  data(){
    return{
      userInfo:{
        name:"iwen",
        age:20
       }
     }
   },
  components:{
    ComponentB
   }
}
</script>

<template>
  <h3>ComponentB</h3>
  <p>{{ title }}</p>
  <p>{{ userInfo.name }}</p>
  <p>{{ userInfo.age }}</p>
</template>
<script>
export default {
  props:{
    title:{
      type:String
     },
    userInfo:{
      type:Object
     }
   }
}
</script>

默认值

<template>
  <h3>ComponentB</h3>
  <p>{{ title }}</p>
  <p>{{ userInfo.name }}</p>
  <p>{{ userInfo.age }}</p>
  <p>{{ age }}</p>
</template>
<script>
export default {
  props:{
    title:{
      type:String
     },
    userInfo:{
      type:Object,
      default(){
        return {}
       }
     },
    age:{
      type:Number,
      default:20
     }
   }
}
</script>

必选项

<template>
  <h3>ComponentB</h3>
  <p>{{ title }}</p>
  <p>{{ userInfo.name }}</p>
  <p>{{ userInfo.age }}</p>
  <p>{{ age }}</p>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
      required:true
     },
    userInfo:{
      type:Object,
      // 对象或者数组应当用工厂函数返回
      default(){
        return {}
       }
     },
    age:{
      type:Number,
      default:20
     }
   }
}
</script>

温馨提示

警告！prop 是只读的！

<template>
  <h3>ComponentB</h3>
  <p>{{ title }}</p>
  <button @click="updateHandle">修改数据</button>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
      required:true
     }
   },
  updateHandle(){
    // 警告！prop 是只读的！
    this.title = "不允许修改"
   }
}
</script>

实时效果反馈

1. props 传递数据，下列那个是效验props的必选项：

A default

B type

C required

D props

答案

1=>C

}
}

**实时效果反馈**

**1. `props` 传递数据，下列那个是效验`props`的必选项：**

A `default`

B `type`

C `required`

D `props`

**答案**

1=>C