組件的父子通信由自定義事件來完成
什麼時候需要自定義事件呢？
- 當子組件需要向父組件傳遞數據時
- v-on不僅可以用於監聽DOM事件，也可以用於組件間的自定義事件
自定義事件的流程：
- 在子組件中，通過$emit()來觸發事件
- 在父組件中，通過v-on來監聽組件事件
完整案例代碼：(1234分別表示最關鍵的四步）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父組件模板-->
<div id="app">
<!-- 33333333333333333333333333333333333-->
<cpn @itemclick="cpnClick"></cpn>
</div>
<!--子組件模板-->
<template id="cpn">
<div>
<!--11111111111111111111111111111111111111-->
<button v-for="item in categories"
@click="btnClick(item)">
<!--這裏通過自定義事件-->
{{item.name}}</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//子組件
const cpn={
template:'#cpn',
data(){
return {
categories:[
{id:'aaa',name:'家勇家電'},
{id:'bbb',name:'手機數碼'},
{id:'ccc',name:'熱門推薦'},
{id:'ddd',name:'電腦辦公'}
]
}
},
methods:{
btnClick(item){
//222222222222222222222222222222222222222
// 發射事件
this.$emit('itemclick',item)
//itemclick是事件名稱，發射出去的事件
}
}
}
//父組件
const app=new Vue({
el:'#app',
data:{
message:'你好'
},
components:{
cpn
},
methods:{
cpnClick(item){
//44444444444444444444444444444444444444
console.log('cpnClick',item);
}
}
})
</script>
</body>
</html>