Vue组件间传值及传值校验

1.组件间传值

  Vue的组件间传值使用html属性的方式 

app.component('test',{
  
 // 利用props属性接收传过来的属性值
  props:['content'],    
  template: '<div>{{content}}</div>'

})

//根组件
const app = Vue.createApp({
  
    data:{

           num: 123
   },
    template: 
    `


            <test v-bind:content="num"/>
    `
   
 
})


const vm = app.mount('root');

 2.组件传值校验

  将props属性变为一个对象用以校验。 

const app = Vue.createApp({

         data(){

                num: 123
         },
    template: `<test v-bind:content="num"/>`

 })
app.component('test',{
   
    // 传过来的content必须是Number类型
    // 在冒号后面指定类型

     props:{
            content:Number
     },
    template:'<div>{{content}}</div>'
})

 3.更高级的校验与默认值

  通过将传过来的属性名也变成一个对象来进行更高级的校验 

const app = Vue.createApp({


          data(){

               num:123
          },
        template:'<test v-bind:content="num"/>'
 })


app.component('test',{

       props:{
        content:{    
                  //传过来的类型必须是数字
                   type: Number,
                   //验证器 可以写更复杂的验证条件
                   validator:funtion(val){
                            return val<1000
                    },
                    // 必须要传
                    required:true,
                   //默认值 如果没有传这个变量就默认为这个值
                    default:funtion(){
                    return 1234;    
               }
                // 也可以是default:1234
    }
   }
})