實例介紹Vue透過$emit方法實作子父元件通信

本篇文章為大家帶來了關於vue的相關知識，其中主要介紹了關於$emit的相關問題，在子元件中透過$emit來呼叫父元件中的方法實現，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、vue.js教學】

Vue可以透過props屬性，將參數從父元件傳遞給子元件，相對而言是比較簡單的。

如果是想從子元件傳遞參數到父元件的話，得借助父元件的方法，同時在子元件中透過$emit來呼叫父元件中的方法實作。

接下來具體演示下。

 場景

同樣情況，父元件是新聞清單元件，子元件是新聞內容元件。在子元件中點選刪除按鈕，可以將刪除的新聞資訊傳遞給父元件，從而實現新聞清單的更新。

父元件開發

父元件用來顯示新聞列表，程式碼如下：

<template>
  <div>
    <template>
      <newscontent></newscontent>
    </template>
  </div>
</template>
<script>
import NewsContent from &#39;@/components/NewsContent.vue&#39;;
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"，將父元件的參數傳遞給子元件。

• 透過@removeNews="removeNews"，將父元件的方法傳遞給子元件，注意子元件就是透過該方法來呼叫父元件方法並傳參的。

 子元件開發

子元件透過$emit呼叫父元件傳遞過來的removeNews方法，程式碼如下：

<template>
  <div>
    <p>
      新闻标题：{{news.title}}--新闻作者：{{news.author}}
      <button>删除</button>
    </p>
  </div>
</template>
<script>
export default {
  name: "MyCounter",
  props: [&#39;news&#39;],
  mounted() {
    console.log(this.news);
  },
  methods: {
    btnDelete(news) {
      this.$emit("removeNews", news);     
    }
  }
}
</script>

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

所以點擊子元件刪除按鈕後，父元件中對應的新聞就會被刪除。

子元件呼叫父元件的方法，來實作子父元件通訊。父元件需要先將方法傳遞給子元件，子元件在透過$emit呼叫傳遞的方法，並不算很複雜。

1.props和$attrs具有資料的單向性，只能由父元件傳遞數據，不具備子傳父的功能。

2.在vue中，我們可以使用自訂事件實作子元件傳遞資料到父元件。

自訂事件

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

getChildData(data){
	//data是子组件触发事件传递的参数
	console.log('child data is' +data)
}
<child-c></child-c>

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

$emit觸發事件

#1.每個元件實例都要$emit方法用來觸發自訂事件。

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

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

（2）第二個參數是傳遞給父元件的資料。在父元件中就是定義的事件函數的第一個參數。

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

【相關推薦：javascript影片教學、vue.js教學】

以上是實例介紹Vue透過$emit方法實作子父元件通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！