3.3 组件的data和props

组件内html使用的数据，可能来自于javascript部分的data（数据）或者props（属性），这两个的异同是什么呢？
首先，data和props里面的变量都可以在template（模板）部分用双大括号引用，例如{{msg}}，光看template部分是无法判断这个msg到底是props还是data
data在组件里，需要表现为一个函数，下面是一个单文件组件的data部分：
export default{
    name:"Main",
    data(){
        return{
            mainInfo:{
                courseName:"java程序设计",
                chapterName:"8.1 类的基础",
                percent:0.85,
            },
        }
    },
}
这里出现了一个mainInfo对象，然后这个对象有三个属性：courseName，chapterName和percent。它们都可以用在html模板中，例如{{mainInfo.courseName}}

那props是什么呢？
props是组件的参数，必须由外部传入。data是页面内部的数据，页面在运行的时候随时可以更改里面的值；props是外部给的值，它的值只能读取不能改动。它通常是这样定义的，如下所示第三行代码，这种定义方式只需要写上属性的名称，不需要指定属性的类型：
export default{
    name:"Main",
    props:["username","courseId"],
    data(){
        return{
            mainInfo:{
                courseName:"java程序设计",
                chapterName:"8.1 类的基础",
                percent:0.85,
            },
        }
    },
}
属性还能这样定义,username和courseId都指定了类型是String：
export default{
    name:"Main",
    props:{
        username:String,
        courseId:String
    },
    data(){
        return{
            mainInfo:{
                courseName:"java程序设计",
                chapterName:"8.1 类的基础",
                percent:0.85,
            },
        }
    },
}
假如这个Main组件被别的组件使用，那么就要提供username和courseId这两个属性了，类似这样：
<template>
    <Main :username="abcd" :courseId="1"/>
</template>
也就是说props的值需要使用者提供，上面的代码在什么组件，这个组件就负责提供这两个属性的值。
这里需要说明一下，:username是v-bind:的简写，这说明了abcd也是一个变量，username的值是abcd这个变量的值；如果没有冒号，username=‘abcd’，那么username这个属性值就是abcd
在组件的javascript内部，都可以使用this.这样的形式来引用data或者props里面的任何元素（但是props的值不能修改，只能读取），例如：
if(this.username != ""){
    let t=response.data;
    this.chapter=t;
}
如果光看着部分代码，这里的this.username，username可能是data里的元素，也可能是props里的元素。但是chapter就一定是data里的元素，因为this.chapter=t修改了chapter的值，而props的值，是不能修改的。