Vue怎么通過$emit方法實現(xiàn)子父組件通信

本篇內容介紹了“Vue怎么通過$emit方法實現(xiàn)子父組件通信”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

成都創(chuàng)新互聯(lián)公司于2013年開始，先為霍邱等服務建站，霍邱等地企業(yè)，進行企業(yè)商務咨詢服務。為霍邱企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

Vue可以通過props屬性，將參數(shù)從父組件傳遞給子組件，相對而言是比較簡單的。

如果是想從子組件傳遞參數(shù)到父組件的話，得借助父組件的方法，同時在子組件中通過$emit來調用父組件中的方法實現(xiàn)。

接下來具體演示下。

場景

同樣情況，父組件是新聞列表組件，子組件是新聞內容組件。在子組件中點擊刪除按鈕，可以將刪除的新聞信息傳遞給父組件，從而實現(xiàn)新聞列表的更新。

父組件開發(fā)

父組件用來顯示新聞列表，代碼如下：

<template>
  <div>
    <template v-for="item in list">
      <NewsContent :news="item" @removeNews="removeNews"></NewsContent>
    </template>
  </div>
</template>
<script>
import NewsContent from '@/components/NewsContent.vue';
export default {
  name: "MyCounter",
  data() {
    return {
      list: [
        {
          title: "今天天氣不錯",
          author: "張三"
        },
        {
          title: "今天下雨了",
          author: "李四"
        }
      ]
    }
  },
  components: {
    NewsContent
  },
  methods: {
    removeNews(news) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].title == news.title && this.list[i].author == news.author) {
          this.list.splice(i, 1);
          break;
        }
      }
    }
  }
}
</script>

有幾個需要注意的點：

• 在父組件中注冊了子組件NewsContent

• 在父組件中定義了刪除新聞的方法，當傳遞的新聞標題與作者均匹配時，則從新聞列表list中刪除對應的新聞。

• 通過:news="item"，將父組件的參數(shù)傳遞給子組件。

• 通過@removeNews="removeNews"，將父組件的方法傳遞給子組件，注意子組件就是通過該方法來調用父組件方法并傳參的。

子組件開發(fā)

子組件通過$emit調用父組件傳遞過來的removeNews方法，代碼如下：

<template>
  <div>
    <p>
      新聞標題：{{news.title}}--新聞作者：{{news.author}}
      <button @click="btnDelete(news)">刪除</button>
    </p>
  </div>
</template>
<script>
export default {
  name: "MyCounter",
  props: ['news'],
  mounted() {
    console.log(this.news);
  },
  methods: {
    btnDelete(news) {
      this.$emit("removeNews", news);     
    }
  }
}
</script>

注意，當點擊新聞后面的刪除按鈕時，觸發(fā)btnDelete方法，而btnDelete方法內容為this.$emit("removeNews", news);，即調用了父組件的removeNews方法，且傳遞參數(shù)news。

所以點擊子組件刪除按鈕后，父組件中對應的新聞被刪除。

子組件調用父組件的方法，來實現(xiàn)子父組件通信。父組件需要先將方法傳遞給子組件，子組件在通過$emit調用傳遞的方法，并不算很復雜。

1.props和$attrs具有數(shù)據(jù)的單向性，只能由父組件向子組件傳遞數(shù)據(jù)，不具備子傳父的功能。

2.在vue中，我們可以使用自定義事件實現(xiàn)子組件向父組件傳遞數(shù)據(jù)。

自定義事件

1.在子組件上使用v-on指令綁定自定義事件

getChildData(data){
	//data是子組件觸發(fā)事件傳遞的參數(shù)
	console.log('child data is' +data)
}
<child-c v-on:get-child-data='getChildData'></child-c>

2.事件的名稱推薦使用-分割

$emit觸發(fā)事件

1.每一個組件實例都要$emit方法用來觸發(fā)自定義事件。

2.$emit(fn,arg)接受兩個參數(shù)

（1）第一個參數(shù)是觸發(fā)的事件名稱，注意必須和定義的事件名完全相同。

（2）第二個參數(shù)是向父組件傳遞的數(shù)據(jù)。在父組件中就是定義的事件函數(shù)的第一個參數(shù)。

this.$emit('get-child-data','hello father')

“Vue怎么通過$emit方法實現(xiàn)子父組件通信”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

當前名稱：Vue怎么通過$emit方法實現(xiàn)子父組件通信
標題URL：http://bm7419.com/article48/jccjep.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、面包屑導航、搜索引擎優(yōu)化、做網(wǎng)站、網(wǎng)站制作、手機網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)