初学vue组件应该注意的细节-子组件不可随意修改父组件数据

1、子组件中，data必须为function，否则报错；

只有根组件data可为对象形式
错误示范：

Vue.compoent('row',{
    data:{
        
    }
})

正确示范：

Vue.compoent('row',{
    data:function(){
        return{
            
        }
    }，
    template：`<div></div>`
})

2、ref操作dom

3、子组件不可随意修改父组件传递的值例如：

<row :des="des"></row>

Vue.component('row', {template:`<div @click="handleClick">1</div>`,

            props:{
                des:{
                    type:Number,
                default:0
                }
            },
        methods:{
            handleClick:function(){
                this.des++
            }
        }
})

子组件校验父组件的传值

三种形式：

props:{
        des:{
            type:Number,//类型
            default:9,//默认值
            required:false,//非必填
            validator:function (val) {//自定义校验器
                return val>8
            }
        }
    },

非props属性

非props属性是指父组件向子组件传值，子组件中的props并未去接受这个属性，且如果是非props属性，不可在子组件中直接使用，但会在最外层标签显示此属性

//组件标签
<row :des="des" cone="1"></row>

//浏览器中显示
<div cone="1"><div>1</div></div>


//组件定义
 Vue.component('row', {template:`<div @click="handleClick"><div>1</div></div>`,

            props:{
                des:{
                    type:Number,
                    default:9,
                    required:false,//非必填
                    validator:function (val) {
                        return val>8
                    }
                }
            },
            data:function(){
                return{
                    number:this.des
                }
            },
        methods:{
            handleClick:function(){
                this.number
            }
        }
})