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'] } } })