一、定义属性并获取属性值
props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件<com1></com1>,如果要给它加个lll的属性，props要写在组件里，并且是以数组的形式 ，因为可能要放好几个属性。在组件的模板里读出属性值只需要用插值的形式{{}}
<div id="app">
<h1>{{msg}}</h1>
<com1 lll="哈哈哈哈"></com1>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"HelloWorld"
},
components:{
"com1":{
template:`<h2>局部组件1{{lll}}</h2>`,
props:[`lll`]
}
}
});
</script>
image.png
image.png
传入属性的名字不能在中间加“-”,要用小驼峰的命名方式。
请注意，对于自定义标签的命名 Vue.js 不强制遵循 W3C 规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。
image.png
二、在构造器里向组件中传值
<div id="app">
<h1>{{msg}}</h1>
<com1 v-bind:lll="msg"></com1>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"HelloWorld"
},
components:{
"com1":{
template:`<h2>局部组件{{lll}}</h2>`,
props:[`lll`]
}
}
});
</script>
把构造器里data的数据传给组件，使用的是v-bind:属性名="data属性名"指令
