Component 组件props 属性设置 · web前端

[TOC] # 简介 props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件`<panda></panda>`,这时我们想给他加个标签属性写成<`panda here='China'></panda>` 意思就是熊猫来自中国，当然这里的China可以换成任何值。定义属性的选项是props # 定义属性并获取属性值定义属性我们需要用props选项，加上数组形式的属性名称，例如：`props:[‘here’]`。在组件的模板里读出属性值只需要用插值的形式，例如`{{ here }}`. ~~~ <body> <div id="app"> <panda here="china"></panda> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', components: { "panda": { template: `<div style="color:red;">param from {{here}}</div>`, props: ['here'] } } }); </script> ~~~ 上面的代码定义了panda的组件，并用props设置了here的属性值，在here属性值里传递了China给组件。最后输出的结果是红色字体的Panda from China # 属性中带’-‘的处理方式我们在写属性时经常会加入’-‘来进行分词，比如：`<panda from-here="China"></panda>`，那这时我们在props里如果写成`props:['form-here']`是错误的，我们必须用小驼峰式写法`props:['formHere']` 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'] } } }) ~~~