props選項傳遞數(shù)據(jù)
組件間的通信
組件意味著協(xié)同工作，通常父子組件會是這樣的關(guān)系：組件 A 在它的模版中使用了組件 B件蚕。它們之間必然需要相互通信：父子組件之間需要通信：<strong>父組件要給子組件傳遞數(shù)據(jù)抚芦，子組件需要將它內(nèi)部發(fā)生的事情告知給父組件跳纳。</strong>
在 Vue.js 中套硼，父子組件的關(guān)系可以總結(jié)為 props down, events up 兵钮。父組件通過 props 向下傳遞數(shù)據(jù)給子組件河咽，子組件通過 events 給父組件發(fā)送消息钠右。如下圖所示：
props-events
1.組件傳值props —— 父組件傳遞數(shù)據(jù)給子組件</strong>
- prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性。子組件需要顯式地用 props 選項聲明 “props”：
Vue.component('child', {
// 聲明 props
props: ['message'],
// 就像 data 一樣忘蟹，prop 可以用在模板內(nèi)
// 同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: '<span>{{ message }}</span>'
})
- 簡單的傳值
<body>
<div id="app">
<sk-component message="你好,老鐵"></sk-component>
</div>
<div id="dom">
<sk-component message="今天sk實在是666,萌萌噠"></sk-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1.創(chuàng)建一個組件
Vue.component('sk-component', {
//props選項 父組件向子組件傳值
props:['message'],
//子組件
template:'<h1>{{message}}</h1>'
});
//2.vue實例
new Vue({
el:'#app'
});
new Vue({
el:'#dom'
});
</script>
HTML 特性不區(qū)分大小寫飒房。當使用非字符串模版時，prop的名字形式會從 camelCase 轉(zhuǎn)為 kebab-case（短橫線隔開）媚值。
2.動態(tài)綁定傳遞數(shù)據(jù)
- 父組件傳值給子組件狠毯，動態(tài)綁定
<body>
<div id="app">
<!--注意:父子組件傳值, 動態(tài)綁定-->
<my-parent :imagesrc="img" :title="content"></my-parent>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1.定義子組件
var Child = Vue.extend({
props:['src'],
//注意綁定
template:''
});
//2.定義父組件
var Parent = Vue.extend({
props:['imagesrc', 'title'],
//注冊子組件
components:{
'my-child':Child
},
//注意綁定
template:`
<div>
<my-child :src="imagesrc"></my-child>
<p>{{title}}</p>
</div>
`
});
//3.實例化vue
Vue.component('my-parent', Parent);
new Vue({
el:"#app",
data:{
img:'images/pic1.jpeg',
content:'不一樣的風(fēng)景很美'
}
})
</script>
- 父組件傳遞數(shù)據(jù)給子組件圖解
vueb4.png
命名規(guī)范
- HTML 特性是不區(qū)分大小寫的。所以褥芒，當使用的不是字符串模版嚼松，camelCased (駝峰式) 命名的 prop 需要轉(zhuǎn)換為相對應(yīng)的 kebab-case (短橫線隔開式) 命名
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
- 如果你使用字符串模版，則沒有這些限制。
