Vue.js 父子組件之間通訊的方式

Vue 父子組件之間的同窗有一下幾種方式：

1. props

2. $emit -- 組件封裝用的比較多

3. .sync -- 語法糖

4. $attrs 和 $listeners -- 組件封裝用的比較多

5. privide 和 inject -- 高階組件

下面將分別介紹

一、 props

這個在平常開發中運用較多，簡單來講，咱們能夠經過props向子組件傳遞數據，就像一個水管同樣，父組件的數據從上往下流向子組件，不能逆流。這也是vue的設計概論之單項數據流。

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

二、$emit

官方介紹是觸發當前實例上得事件，附加參數都會傳給監聽器回調。

<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!'
    }
  }
})

三、.sync 修飾符

在vue1.x的時候，曾做爲雙向綁定功能存在，即子組件能夠修改父組件中的值。由於它違反了單向數據流的設計理念，因此在vue2.x中被去掉了，可是在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
  }
})

代碼裏只有一句話：

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

官方語法是：update:myPropName 其中 myPropName 表示要更新的 prop 值。固然若是你不用 .sync 語法糖使用上面的 .$emit 也能達到一樣的效果

四、 $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>

let Child = Vue.extend({
  template: '<h2>{{ foo }}</h2>',
  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')
    }
  }
})

能夠看到，咱們能夠經過 $attrs 和 $listeners 進行數據傳遞，在須要的地方進行調用和處理，仍是很方便的。固然，咱們還能夠經過 v-on="$listeners" 一級級的往下傳遞，子子孫孫無窮盡也！

五、privide 和 inject

來看下官方對 provide / inject 的描述：

　　provide 和 inject 主要爲高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。而且這對選項須要一塊兒使用，以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。

<div id="app">

  <son></son>

</div>

let Son = Vue.extend({
  template: '<h2>son</h2>',
  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
  }
})

更多列子能夠參考element-ui源碼，其中的大量使用了該方法