属性验证

验证数据类型

  <div id="app">
    <Father></Father>
  </div>

  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <Son :money = "money"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是子组件 </h3>
      <p> 父亲给了我  {{ money + 100}}  钱  </p>
      <p> num: {{ num }} </p>
    </div>
  </template>	

/* 
    父子组件通信会使用到 props 
 */

  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 1000,
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    //props: [ 'msg' ] --数组   没有进行验证，知识单纯的接收了一个父组件传递来的数据
    //props: { attr: attrType }--对象  进行普通属性验证
	//props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
    props: {
      // key: value   key就是我们接收的属性    value就是我们想要的这个属性的数据类型
      'money': Number, // String   Boolean       Object...
      },
      'num': {
        type: Number,
        default:200
      }
    }
  })

  new Vue({
    el: '#app'
  })

验证数据范围

<div id="app">
    <Father></Father>
  </div>

  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <Son :n = "n"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是子组件 </h3>
      <p> 父亲给了我  {{ money + 100}}  钱  </p>
    </div>
  </template>

Vue.component('Father',{
    template: '#father',
    data () {
      return {
        n: 400
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    props: {
      'n': {
//props: { validator ( val ) { return boolean }} 可以进行一个条件的比较
        validator ( val ) { //属性验证函数，一般常用于条件的比较
          // val 就是我们得到的数据
          return  val > 300 //返回值是一个布尔值
    }
  }
})

  new Vue({
    el: '#app'
  })