props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件，这时我们想给他加个标签属性写成 意思就是熊猫来自中国，当然这里的China可以换成任何值。定义属性的选项是props。
一、定义属性并获取属性值
定义属性我们需要用props选项，加上数组形式的属性名称，例如：props:['here']。
在组件的模板里读出属性值只需要用插值的形式，例如{{ here }}。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-2</title> </head> <body> <h1>component-2</h1> <hr> <div id="app"> <panda here="China"></panda> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['here'] } } }) </script> </body> </html>
上面的代码定义了panda的组件，并用props设置了here的属性值，在here属性值里传递了China给组件。 最后输出的结果是红色字体的Panda from China.
二、属性中带’-‘的处理方式
我们在写属性时经常会加入‘-’来进行分词，比如：<panda from-here="China"></panda>，那这时我们在props里如果写成props:['from-here']是错误的，我们必须用小驼峰式写法props:['fromHere']。
html文件：
<panda from-here="China"></panda>
javascript文件：
var app=new Vue({ el:'#app', components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['fromHere'] } } })
PS：因为这里有坑，所以还是少用‘-’为好
三、在构造器里向组件中传值
把构造器中data的值传递给组件，我们只要进行绑定就可以了。就是我们第一季学的v-bind:xxx.
我们直接看代码:
Html文件：
<panda v-bind:here="message"></panda>
javascript文件：
var app=new Vue({ el:'#app', data:{ message:'SiChuan' }, components:{ "panda":{ template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['here'] } } })
