前端培训丁鹿学堂：vue之props进阶知识

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

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

<Dbutton v-bind="{content:'abc',name:'button'}" />
// =========       
props:{
            content:{
                type:String, 
                default(){
                    return '缺省内容'
                },
            },
            name:{
                type:String,
                default(){
                    return 'hhh'
                }
            }
        },

props的校验

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

        props:{
            content:{
                type:String, 
                required:true,
                default(){
                    return '缺省内容'
                },
                valodator(data){
                    return ['abc','dec'].includes(data)
                }
            }
        },

props父传子单向数据流

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

1. 在data中把props的属性赋值给子组件data数据
2. 子组件直接修改data数据

<div @click="text = 123"> {{text}}</div>
// ======        
props:{
            content:{
                type:String, 
                default(){
                    return '缺省内容'
                },
            }
        },
        data(){
            return {
                text:this.content
            }
        },