vue總結「二」--組件間的通訊

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章