components 組件props屬性設(shè)置
1煎饼、簡(jiǎn)單使用
<div class="app">
<cat name='tail'></cat>
</div>
new Vue({
el:'.app',
data:{},
components:{
'cat': {
template: `<p>我家有個(gè)小貓讹挎，它的名字叫 {{name}}</p>`,
props: ['name']
}
}
})
注意，如果components屬性吆玖，為駝峰式 caiName,為它傳值的時(shí)候要寫(xiě)成 cat-name筒溃， 如下：
<div class="app">
<cat cat-name='tail'></cat>
</div>
new Vue({
el:'.app',
data:{},
components:{
'cat': {
template: `<p>我家有個(gè)小貓，它的名字叫 {{catName}}</p>`,
props: ['catName']
}
}
})
2沾乘、給components的屬性綁定data數(shù)據(jù)
<div class="app">
<cat :cat-name='message'></cat>
</div>
new Vue({
el:'.app',
data:{
message:'tail.....'
},
components:{
'cat': {
template: `<p>我家有個(gè)小貓怜奖，它的名字叫 {{catName}}</p>`,
props: ['catName']
}
}
})
