1. 父子組件通訊：props 和 $emit

父組件 index.vue

• 給子組件 Input 傳遞事件 addHandler
• 給子組件 List 傳遞數(shù)據(jù)list、事件 deleteHandler

<template>
  <div>
    //傳遞 addHandler事件
    <Input @add="addHandler"/>
    //傳遞 list數(shù)據(jù)、deleteHandler事件
    <List :listFather="list" @delete="deleteHandler"/>
  </div>
</template>

<script>
//引入子組件
import Input from './Input'
import List from './List'
export default {
  //注冊(cè)子組件
  components:{
    Input,
    List
  },
  data() {
    return {
      list:[
        {
          id:"id 1",
          title:"標(biāo)題 1"
        },
        {
          id:"id 2",
          title:"標(biāo)題 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

• 通過(guò)$emit調(diào)用父組件的 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(){
      //調(diào)用父組件的事件
      this.$emit('add',this.title)
    }
  },
};
</script>

子組件 List.vue

• 通過(guò)props獲取到父組件傳的數(shù)據(jù)listFather
• 通過(guò)$emit調(diào)用父組件的 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:{
    // 定義類(lèi)型和默認(rèn)值
    listFather:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    deleteItem(id){
      this.$emit('delete',id)
    },
  },
};
</script>

2. 組件間通訊：自定義事件

實(shí)現(xiàn)組件input 和 組件 List之間的通訊

① 新建文件event.js 實(shí)例一個(gè)vue對(duì)象
② 兩個(gè)組件分別引入該實(shí)例
③ 通過(guò)綁定自定義事件，調(diào)用自定義事件實(shí)現(xiàn)組件間的通訊

組件List.vue

• 綁定自定義事件onAddTit
• 在deforeDestroy鉤子中銷(xiāo)毀 自定義事件onAddTit，防止造成內(nèi)存泄露

<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(){
    //及時(shí)銷(xiāo)毀，負(fù)責(zé)可能造成內(nèi)存泄露
    event.$off('onAddTit',this.addTitHandler)
  },
  methods: {
    addTitHandler(title){
      listFather.push(title)
    }
  },
};
</script>

組件 Input.vue

• 調(diào)用在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(){
      //調(diào)用自定義事件
      event.$emit('onAddTit',this.title)
      this.title=''
    }
  },
};
</script>