Vue.js中實現父子組件通信的方式有哪些

這篇文章將為大家詳細講解有關Vue.js中實現父子組件通信的方式有哪些，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

1. Prop

英式發音：[pr?p]。這個在我們日常開發當中用到的非常多。簡單來說， 我們可以通過Prop 向子組件傳遞數據 。用一個形象的比喻來說，父子組件之間的數據傳遞相當于自上而下的下水管子，只能從上往下流，不能逆流。這也正是 Vue 的設計理念之單向數據流。而 Prop 正是管道與管道之間的一個銜接口，這樣水（數據）才能往下流。說這么多，看代碼：

<div id="app">
 <child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
 template: '<h3>{{ content }}</h3>',
 props: {
  content: {
   type: String,
   default: () => { return 'from child' }
  }
 }
})
new Vue({
 el: '#app',
 data: {
  message: 'from parent'
 },
 components: {
  Child
 }
})

你可以狠狠的戳這里查看Demo！瀏覽器輸出：

from parent

2. $emit

英式發音：[i?m?t]。官方說法是 觸發當前實例上的事件。附加參數都會傳給監聽器回調 。按照我的理解不知道能不能給大家說明白，先簡單看下代碼吧：

<div id="app">
 <my-button @greet="sayHi"></my-button>
</div>

let MyButton = Vue.extend({
 template: '<button @click="triggerClick">click</button>',
 data () {
  return {
   greeting: 'vue.js!'
  }
 },
 methods: {
  triggerClick () {
   this.$emit('greet', this.greeting)
  }
 }
})

new Vue({
 el: '#app',
 components: {
  MyButton
 },
 methods: {
  sayHi (val) {
   alert('Hi, ' + val) // 'Hi, vue.js!'
  }
 }
})

你可以狠狠的戳這里查看Demo! 大致邏輯是醬嬸兒的：當我在頁面上點擊按鈕時，觸發了組件 MyButton 上的監聽事件 greet ，并且把參數傳給了回調函數 sayHi 。說白了，當我們從子組件Emit（派發） 一個事件之前，其內部都提前在事件隊列中On（監聽）了這個事件及其監聽回調。其實相當于下面這種寫法：

vm.$on('greet', function sayHi (val) {
 console.log('Hi, ' + val)
})
vm.$emit('greet', 'vue.js')
// => "Hi, vue.js"

3. .sync 修飾符

這個家伙在 vue@1.x 的時候曾作為雙向綁定功能存在，即子組件可以修改父組件中的值。因為它違反了單向數據流的設計理念，所以在 vue@2.0 的時候被干掉了。但是在 vue@2.3.0+ 以上版本又重新引入了這個.sync 修飾符。但是這次它只是作為一個編譯時的語法糖存在。它會被擴展為一個自動更新父組件屬性的 v-on 監聽器。說白了就是讓我們手動進行更新父組件中的值了，從而使數據改動來源更加的明顯。下面引入自官方的一段話：

在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源。

既然作為一個語法糖，肯定是某種寫法的簡寫形式，哪種寫法呢，看代碼：

<text-document
 v-bind:title="doc.title"
 v-on:update:title="doc.title = $event">
</text-document>

于是我們可以用 .sync 語法糖簡寫成如下形式：

<text-document v-bind:title.sync="doc.title"></text-document>

廢話這么多，如何做到“雙向綁定” 呢？讓我們進段廣告，廣告之后更加精彩！ ... 好的，歡迎回來。假如我們想實現這樣一個效果：改變子組件文本框中的值同時改變父組件中的值。怎么做？列位不妨先想想。先看段代碼：

<div id="app">
 <login :name.sync="userName"></login> {{ userName }}
</div>

let Login = Vue.extend({
 template: `
  <div class="input-group">
   <label>姓名:</label>
   <input v-model="text">
  </div>
 `,
 props: ['name'],
 data () {
  return {
   text: ''
  }
 },
 watch: {
  text (newVal) {
   this.$emit('update:name', newVal)
  }
 }
})

new Vue({
 el: '#app',
 data: {
  userName: ''
 },
 components: {
  Login
 }
})

你可以狠狠的戳這里查看Demo!下面劃重點，代碼里有這一句話：

this.$emit('update:name', newVal)

官方語法是： update:myPropName 其中 myPropName 表示要更新的 prop 值。當然如果你不用 .sync 語法糖使用上面的 .$emit 也能達到同樣的效果。僅此而已！

4. $attrs 和 $listeners

官網對 $attrs 的解釋如下：

包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 ( class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。

官網對 $listeners 的解釋如下：

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

我覺得 $attrs 和 $listeners 屬性像兩個收納箱，一個負責收納屬性，一個負責收納事件，都是以對象的形式來保存數據。看下面的代碼解釋：

<div id="app">
 <child 
  :foo="foo" 
  :bar="bar"
  @one.native="triggerOne"
  @two="triggerTwo">
 </child>
</div>

從 Html 中可以看到，這里有倆屬性和倆方法，區別是屬性一個是 prop 聲明，事件一個是 .native 修飾器。

let Child = Vue.extend({
 template: '<h3>{{ foo }}</h3>',
 props: ['foo'],
 created () {
  console.log(this.$attrs, this.$listeners)
  // -> {bar: "parent bar"}
  // -> {two: fn}
  
  // 這里我們訪問父組件中的 `triggerTwo` 方法
  this.$listeners.two()
  // -> 'two'
 }
})

new Vue({
 el: '#app',
 data: {
  foo: 'parent foo',
  bar: 'parent bar'
 },
 components: {
  Child
 },
 methods: {
  triggerOne () {
   alert('one')
  },
  triggerTwo () {
   alert('two')
  }
 }
})

你可以狠狠的戳這里查看Demo! 可以看到，我們可以通過 $attrs 和 $listeners 進行數據傳遞，在需要的地方進行調用和處理，還是很方便的。當然，我們還可以通過 v-on="$listeners" 一級級的往下傳遞，子子孫孫無窮盡也！

一個插曲！

當我們在組件上賦予了一個非Prop 聲明時，編譯之后的代碼會把這些個屬性都當成原始屬性對待，添加到 html 原生標簽上，看上面的代碼編譯之后的樣子：

<h3 bar="parent bar">parent foo</h3>

這樣會很難看，同時也爆了某些東西。如何去掉？這正是inheritAttrs 屬性的用武之地！給組件加上這個屬性就行了，一般是配合 $attrs 使用。看代碼：

// 源碼
let Child = Vue.extend({
 ...
 inheritAttrs: false, // 默認是 true
 ...
})

再次編譯：

<h3>parent foo</h3>

5. provide / inject

他倆是對CP, 感覺挺神秘的。來看下官方對provide / inject 的描述：

provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。并且這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。

看完描述有點懵懵懂懂！一句話總結就是：小時候你老爸什么東西都先幫你存著等你長大該娶媳婦兒了你要房子給你買要車給你買只要他有的盡量都會滿足你。下面是這句話的代碼解釋：

<div id="app">
 <son></son>
</div>

let Son = Vue.extend({
 template: '<h3>son</h3>',
 inject: {
  house: {
   default: '沒房'
  },
  car: {
   default: '沒車'
  },
  money: {
   // 長大工作了雖然有點錢
   // 僅供生活費，需要向父母要
   default: '￥4500'
  }
 },
 created () {
  console.log(this.house, this.car, this.money)
  // -> '房子', '車子', '￥10000'
 }
})

new Vue({
 el: '#app',
 provide: {
  house: '房子',
  car: '車子',
  money: '￥10000'
 },
 components: {
  Son
 }
})

你可以狠狠的戳這里查看Demo!

6. 其他方式通信

除了以上五種方式外，其實還有：

EventBus

思路就是聲明一個全局Vue實例變量 EventBus , 把所有的通信數據，事件監聽都存儲到這個變量上。這樣就達到在組件間數據共享了，有點類似于Vuex。但這種方式只適用于極小的項目，復雜項目還是推薦 Vuex。下面是實現 EventBus 的簡單代碼：

<div id="app">
 <child></child>
</div>

// 全局變量
let EventBus = new Vue()

// 子組件
let Child = Vue.extend({
 template: '<h3>child</h3>',
 created () {
  console.log(EventBus.message)
  // -> 'hello'
  EventBus.$emit('received', 'from child')
 }
})

new Vue({
 el: '#app',
 components: {
  Child
 },
 created () {
  // 變量保存
  EventBus.message = 'hello'
  // 事件監聽
  EventBus.$on('received', function (val) {
   console.log('received: '+ val)
   // -> 'received: from child'
  })
 }
})

你可以狠狠的戳這里查看Demo!

Vuex

官方推薦的，Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。

$parent

父實例，如果當前實例有的話。通過訪問父實例也能進行數據之間的交互，但極小情況下會直接修改父組件中的數據。

$root

當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。通過訪問根組件也能進行數據之間的交互，但極小情況下會直接修改父組件中的數據。

broadcast / dispatch

他倆是 vue@1.0 中的方法，分別是事件廣播 和 事件派發。雖然 vue@2.0 里面刪掉了，但可以模擬這兩個方法。可以借鑒 Element 實現。有時候還是非常有用的，比如我們在開發樹形組件的時候等等。

關于Vue.js中實現父子組件通信的方式有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。