◆ 父組件向子組件傳值：
- 父組件發送的形式是以屬性的形式綁定值到子組件身上。
- 然後子組件用屬性props接收
- 在props中使用駝峯形式，模板中需要使用短橫線的形式字符串形式的模板中沒有這個限制
<div id="app">
<div>{{pmsg}}</div>
<!--1、menu-item 在 APP中嵌套着 故 menu-item 爲 子組件 -->
<!-- 給子組件傳入一個靜態的值 -->
<menu-item title='來自父組件的值'></menu-item>
<!-- 2、 需要動態的數據的時候 需要屬性綁定的形式設置 此時 ptitle 來自父組件data 中的數據 .
傳的值可以是數字、對象、數組等等
-->
<menu-item :title='ptitle' content='hello'></menu-item>
</div>
<script type="text/javascript">
Vue.component('menu-item', {
// 3、 子組件用屬性props接收父組件傳遞過來的數據
props: ['title', 'content'],
data: function() {
return {
msg: '子組件本身的數據'
}
},
template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父組件中內容',
ptitle: '動態綁定屬性'
}
});
</script>
◆ 子組件向父組件傳值：
- 子組件用
$emit()觸發事件
$emit() 第一個參數爲 自定義的事件名稱 第二個參數爲需要傳遞的數據- 父組件用v-on 監聽子組件的事件
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<!-- 2 父組件用v-on 監聽子組件的事件
這裏 enlarge-text 是從 $emit 中的第一個參數對應 handle 爲對應的事件處理函數
-->
<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
子組件向父組件傳值-攜帶參數
*/
Vue.component('menu-item', {
props: ['parr'],
template: `
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
### 1、子組件用$emit()觸發事件
### 第一個參數爲 自定義的事件名稱 第二個參數爲需要傳遞的數據
<button @click='$emit("enlarge-text", 5)'>擴大父組件中字體大小</button>
<button @click='$emit("enlarge-text", 10)'>擴大父組件中字體大小</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父組件中內容',
parr: ['apple','orange','banana'],
fontSize: 10
},
methods: {
handle: function(val){
// 擴大字體大小
this.fontSize += val;
}
}
});
</script>
◆ 兄弟之間的傳遞：
- 兄弟之間傳遞數據需要藉助於事件中心，通過事件中心傳遞數據
- 提供事件中心 var hub = new Vue()
- 傳遞數據方，通過一個事件觸發hub.$emit(方法名，傳遞的數據)
- 接收數據方，通過mounted(){} 鉤子中 觸發hub.$on()方法名
- 銷燬事件 通過hub.$off()方法名銷燬之後無法進行傳遞數據
<div id="app">
<div>父組件</div>
<div>
<button @click='handle'>銷燬事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
兄弟組件之間數據傳遞
*/
//1、 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>點擊</button>
</div>
</div>
`,
methods: {
handle: function(){
//2、傳遞數據方，通過一個事件觸發hub.$emit(方法名，傳遞的數據) 觸發兄弟組件的事件
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 3、接收數據方，通過mounted(){} 鉤子中 觸發hub.$on(方法名
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>JERRY:{{num}}</div>
<div>
<button @click='handle'>點擊</button>
</div>
</div>
`,
methods: {
handle: function(){
//2、傳遞數據方，通過一個事件觸發hub.$emit(方法名，傳遞的數據) 觸發兄弟組件的事件
hub.$emit('tom-event', 1);
}
},
mounted: function() {
// 3、接收數據方，通過mounted(){} 鉤子中 觸發hub.$on()方法名
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
//4、銷燬事件 通過hub.$off()方法名銷燬之後無法進行傳遞數據
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
</script>
