scope slot 属性验证

slot 作用域插槽

1. 旧：slot-scope

• 使用流程
• 在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上
• 在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据
• 通过 slotProp.xxx 就可以进行使用了

<div id="app">
   <Hello>
      <template slot="default" slot-scope="slotProp">
          <p>{{slotProp.msg}}</p>
      </template>
   </Hello>
</div>
<template id="hello">
<div>
  <slot name="default" :msg="msg"></slot>
</div>
</template>
<script>
Vue.component('Hello',{
    template:'#hello',
    data(){
      return{
          msg:'hello'
      }
    }
})
new Vue({
    el:'#app'
})
</script>

2. 新： v-shot

<div id="app">
  <Hello>
    <template v-slot:default="slotProp">
      {{slotProp.msg}}
    </template>
  </Hello>
  <template id="hello">
    <div>
      <slot name="default" :msg="msg"></slot>
    </div>
  </template>
</div>
<script>
  new Vue({
      components:{
          'Hello':{
              template:'#hello',
              data(){
                  return{
                      msg:'hello'
                  }
              }
          }
      }
  }).$mount('#app')
</script>

属性验证

案例：价格的增加，拿到的数据必须做验证 309+10 319 31910

1. props:[‘msg’]没有进行验证，只是单纯的接收了一个父组件传递来的数据
2. props:{attr:attrType}进行普通属性验证
3. props：{type:typeType,default:value}这里的default是为这个属性设置初始值
4. props:{validator(val){return boolean}}可以进行一个条件的比较

注意：除了以上形式的属性验证以外，还有第三方封装的类库vue-validate vee-validate

• 完整案例：

<div id="app">
  <Father><Father/>
</div>
<template id="father">
  <div>
    <h3>this is father</h3>
    <Son></Son>
  </div>
</template>
<template id="son">
  <div>
    <h3>this is son</h3>
    <p>father give me money{{money+100}}</p>
    <p>num:{{num}}</p>
  </div>
</template>
<script>
  //父子组件会用到props
  Vue.componnet('Father',{
    template:'#father',
    data(){
        return{
            money:1000,
            n:400
        }
    }
  })
  Vue.component('Son',{
      template:'#son',
      props:{
          //key:value key是我们接受的属性，value是我们想要的数据类型
          'money':Number,
          'n':{
              validator(val){//属性验证函数，一般常用于条件的比较
              //val就是我们得到的数据
              return val>300 // 返回值是一个布尔值
              }
          },
          'num':{
              type:Number,
              default:200
          }
      }
  })
  new Vue({
      el:'#app'
  })
</script>