1. 父子組件通訊:props 和 $emit
父組件 index.vue
- 給子組件 Input 傳遞事件 addHandler
- 給子組件 List 傳遞數據list、事件 deleteHandler
<template>
<div>
//傳遞 addHandler事件
<Input @add="addHandler"/>
//傳遞 list數據、deleteHandler事件
<List :listFather="list" @delete="deleteHandler"/>
</div>
</template>
<script>
//引入子組件
import Input from './Input'
import List from './List'
export default {
//註冊子組件
components:{
Input,
List
},
data() {
return {
list:[
{
id:"id 1",
title:"標題 1"
},
{
id:"id 2",
title:"標題 2"
},
]
};
},
methods: {
addHandler(title){
this.list.push({
id:`id-${Date.now()}`,
title
})
},
deleteHandler(id){
this.list=this.list.filter(item=>item.id!=id)
}
},
};
</script>
子組件 Input.vue
- 通過$emit調用父組件的 add事件 並傳值
<template>
<div>
<input type="text" v-model="title">
<button @click="addTitle">add</button>
</div>
</template>
<script>
import event from './event'
export default {
data() {
return {
title:""
};
},
methods: {
addTitle(){
//調用父組件的事件
this.$emit('add',this.title)
}
},
};
</script>
子組件 List.vue
- 通過props獲取到父組件傳的數據listFather
- 通過$emit調用父組件的 delete事件 並傳值
<template>
<div>
<ul>
<li v-for="item in listFather" :key="item.id">
{{item.title}}
<button @click="deleteItem(item.id)">刪除</button>
</li>
</ul>
</div>
</template>
<script>
import event from './event'
export default {
props:{
// 定義類型和默認值
listFather:{
type:Array,
default(){
return []
}
}
},
data() {
return {};
},
methods: {
deleteItem(id){
this.$emit('delete',id)
},
},
};
</script>
2. 組件間通訊:自定義事件
實現組件input 和 組件 List之間的通訊
① 新建文件event.js 實例一個vue對象
② 兩個組件分別引入該實例
③ 通過綁定自定義事件,調用自定義事件實現組件間的通訊
組件List.vue
- 綁定自定義事件onAddTit
- 在deforeDestroy鉤子中銷燬 自定義事件onAddTit,防止造成內存泄露
<template>
<div>
<ul>
<li v-for="item in listFather" :key="item.id">
{{item.title}}
<button @click="deleteItem(item.id)">刪除</button>
</li>
</ul>
</div>
</template>
<script>
import event from './event'
export default {
data() {
return {
listFather:[]
};
},
mounted() {
//綁定自定義事件
event.$on('onAddTit',this.addTitHandler)
},
deforeDestroy(){
//及時銷燬,負責可能造成內存泄露
event.$off('onAddTit',this.addTitHandler)
},
methods: {
addTitHandler(title){
listFather.push(title)
}
},
};
</script>
組件 Input.vue
- 調用在List組件中綁定的自定義事件 onAddTit
<template>
<div>
<input type="text" v-model="title">
<button @click="addTitle">add</button>
</div>
</template>
<script>
import event from './event'
export default {
data() {
return {
title:""
};
},
methods: {
addTitle(){
//調用自定義事件
event.$emit('onAddTit',this.title)
this.title=''
}
},
};
</script>