4.4 组件的data和props

组件内html使用的数据，都来自于javascript部分的data和props，这两个有什么区别呢？
首先data在普通组件里面就已经出现过了，它类似于这样出现：
Vue.component('button-counter',{
    data:function(){
        return{
            count:0
        }
    },
    template:'<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
单文件vue里面的data也类似，data在组件里，需要表现为一个函数，下面是一个单文件组件的data部分：
export default{
    name:"Main",
    data(){
        return{
            mainInfo:{
                courseName:"java程序设计",
                chapterName:"8.1 类的基础",
                percent:0.85,
            },
        }
        ;
    },
}
这里出现了一个mainInfo对象，然后这个对象有三个属性：courseName，chapterName和percent。它们都可以用在html模板中。
那props是什么呢？
props是组件的参数，必须由外部传入，而且在组件内部，是不能修改props的值的。它通常是这样定义的，如下所示第三行代码：
export default{
    name:"Main",
    props:["username","courseId"]data(){
        return{
            mainInfo:{
                courseName:"java程序设计",
                chapterName:"8.1 类的基础",
                percent:0.85,
            },
        }
        ;
    },
}
假如这个Main组件被别的组件使用，那么就要提供username和courseId这两个属性了，类似这样：
<template>
    <Main :username="abcd" :courseId="1"/>
</template>
这里:username是v-bind:username的简写。也就是说props的值需要使用者提供，上面的代码在什么组件，这个组件就负责提供这两个属性的值。而在组件的javascript内部，都可以使用this.这样的形式来引用data或者props里面的任何元素，例如：
if(this.username != ""){
    let t=response.data;
    this.chapter=t;
}
如果光看着部分代码，这里的this.username，username可能是data里的元素，也可能是props里的元素。但是chapter就一定是data里的元素，因为this.chapter=t修改了chapter的值，而props的值，是不能修改的。