vue元件間通訊全面講解

2022-10-10 14:00:03

前言

本章我們將介紹元件間是如何實現資料通訊的。包括父元件向子元件、子元件向父元件、兄弟元件、非關係元件之間的資料通訊。

元件通訊是元件式開發中非常重要的一部分，也是元件式開發中的難點。

元件介紹

元件是 vue 最強大的功能之一，而元件範例的作用域是相互獨立的，這就意味著不同元件之間的資料無法相互參照。

我們需要使用特定的方式來實現元件間的資料通訊，接下來讓我們一個個介紹這幾種類別的元件通訊是如何實現的。

一、父傳子

1. 父元件通過 props 傳遞資料給子元件

父元件通過 props 屬性向子元件傳遞資料。

子元件利用元件範例的 props 屬性定義元件需要接收的引數，在使用元件時通過 attribute的方式傳入引數。

// 在子元件內定義元件接收一個引數 name
{
  props: ['name']
}
// 父元件使用元件時傳遞引數 name
<child :name="name"></child>

接下來我們看一個具體範例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <parent></parent>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('parent', {
    template: '<child :name="name"></child>',
    data() {
      return {
        name: '句號'
      }
    }
  })
  Vue.component('child', {
    template: '<div>{{name}}</div>',
    props: ['name']
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>

程式碼解釋

JS 程式碼第 14-18 行：定義了元件 child，並用 props 接收一個引數 name。

JS 程式碼第 4-12 行：定義了元件 parent，在元件中使用 <child></child> 參照元件，並用 attribute 的方式將 name 傳遞給元件 child。

在上面的例子中，元件 Child 接收引數 name，name 可以是字串、陣列、布林值、物件等型別。但有時候我們需要給接收的引數指定一個特殊的型別和預設值，接下來我們就來介紹一下如何指定 props 的型別和預設值。

2. 定義props的型別和預設值

在上面的例子中，props 接收一個元件引數陣列。

實際上，props 也可以接收一個物件，物件key為元件接收引數的引數名，其值是一個物件，屬性 type 用來指定引數的型別，屬性 default 用來指定引數的預設值:

{
  props: {
    name: {
      type: String,
      default: '句號'
    }
  }
}

接下來我們看一個具體範例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <parent></parent>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('parent', {
    template: '<div><child :name="name" /> <child/></div>',
    data() {
      return {
        name: '慕課網'
      }
    }
  })
  Vue.component('child', {
    template: '<div>{{name}}</div>',
    props: {
      name: {
        type: String,
        default: '句號'
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>

JS 程式碼第 11-19 行：定義了元件 child，並用 props 接收一個字串型別的引數 name，其預設值是：句號。

JS 程式碼第 3-10 行：定義了元件 parent，在元件中使用<child></child>兩次參照元件，<child :name="name" /> 的方式傳遞 name 值，<child/> 使用預設的 name 值。

TIPS： 注意，給陣列和物件型別的 props設定預設值的時候，需要按照以下的寫法：

props: {
  detail: {
    type: Object,
    default: () => {
      return {
        name: '句號'
      }
    }
  },
  loves: {
    type: Array,
    default: () => {
      return []
    }
  }
}

二、子傳父

子元件通過 $emit 傳遞資料給父元件

介紹完父元件傳遞資料給子元件的方式，我們再來看看子元件是如何傳遞資料給父元件的。

子元件通過 $emit 傳遞事件給父元件，父元件通過$on監聽事件：

// 子元件定義事件
this.$emit('事件名稱', '傳遞的引數') //例： this.$emit('add', 111)

// 父元件監聽事件的觸發
<child  @事件名稱="事件觸發的方法"/>

具體範例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <parent></parent>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('parent', {
    template: '<div><child :name="name" :count="count" @add="add"/></div>',
    data() {
      return {
        name: '句號',
        count: 18
      }
    },
    methods: {
      // 父元件通過 @事件名 監聽
      // count 表示事件觸發傳遞的引數
      add(count) {
        this.count = count
      }
    }
  })
  Vue.component('child', {
    template: '<div>我是：{{name}}， 我今年 {{count}}歲。<button @click="add">加一歲</button></div>',
    props: {
      name: {
        type: String,
        default: '句號'
      },
      count: {
        type: Number,
        default: 18
      }
    },
    methods: {
      add(){
        // add -> 觸發的事件名
        // this.count + 1 -> 觸發事件時傳遞的引數
        this.$emit('add', this.count + 1)
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>

程式碼解釋

JS 程式碼第 19-38 行：定義了元件 child，該元件接收兩個引數：1. 字串型別的 name，預設值為：句號。2. 數位型別的 age，預設值為 18。元件模版中，通過按鈕點選事件觸發 add 方法，該方法內部通過$emit觸發事件 add，並將 age + 1 的值作為引數傳遞。

JS 程式碼第 3-18 行：定義了元件 parent，在元件中使用<child :name="name" :age="age" @add="add"/>參照元件，並繫結 add 事件，當事件 add 觸發時呼叫 methods 中的 add 函數。

三、非父子元件間資料傳遞

前面我們介紹了具有父子關係的元件是如何進行資料傳遞的。但實際上，並不是所有的元件都是父子關係，元件間還有兄弟元件、子孫元件、無關係元件，那麼這些元件間是如何進行通訊的呢？

相信在學完本章前面的內容之後這個問題並不能難倒大家。

對於兄弟元件的資料通訊：它們有共同的父元件，我們可以通過父元件傳遞的方式實現資料通訊。
對於子孫元件的資料通訊：可以通過 props 的方式向下逐層傳遞下去，也可以通過 $emit 將事件向上逐層傳遞。
對於非關係元件的資料通訊：通過使用一個空的Vue範例作為中央事件匯流排。

1.通過公有的父元件進行非父子元件間的通訊

假設現在有三個元件分別是<Parent>、<ChildA>、<ChildB>，其中元件<Parent>是<ChildA>和<ChildB>的父元件，<ChildA>和<ChildB>為兄弟元件，<ChildA>和<ChildB>元件間的通訊可以藉助<Parent>來間接傳遞。它的流程大致是這樣：

<ChildA>通過$emit將資料傳遞給<Parent>，<Parent>再通過props將資料傳遞給<ChildB> 。

具體範例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <person @modify="modify"></person>
    <detail :name="name" :count="count"/>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('person', {
    template: '<div><div>姓名：<input type="text" v-model="name"/></div><div>年齡：<input type="text" v-model="count"/></div><button @click="modify">修改</button></div>',
    data() {
      return {
        name: '句號',
        count: 18
      }
    },
    methods: {
      modify() {
        this.$emit('modify', {name: this.name, count: this.count})
      }
    }
  })
  Vue.component('detail', {
    template: '<div>我是：{{name}}， 我今年 {{count}}歲。</div>',
    props: {
      name: {
        type: String,
        default: '句號'
      },
      count: {
        type: Number,
        default: 18
      }
    },
    methods: {
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        name: '句號',
        count: 18
      }
    },
    methods: {
      modify(detail) {
        this.name = detail.name
        this.count = parseInt(detail.count)
      }
    }
  })
</script>
</html>

程式碼解釋

JS 程式碼第 18-30 行：定義了元件 detail，它從父元件接收 name 和 age 兩個引數。

JS 程式碼第 3-17 行：定義了元件 person，它通過 $emit 將元件內輸入的 name 和 age 傳遞給父元件。

JS 程式碼第 38-41 行：接收了元件 person 傳遞過來的事件，並修改 name 和 age。

HTML 程式碼第 3 行：將 name 和 age 傳遞給元件 detail。

2. 通過使用一個空的 Vue 範例作為中央事件匯流排

在Vue中可以使用 EventBus 來作為溝通橋樑的概念，就像是所有元件共用相同的事件中心，可以向該中心註冊傳送事件或接收事件，所以元件都可以上下平行地通知其他元件。

首先我們需要做的是建立事件匯流排，並將它掛載到Vue原型上，在範例中通過this.bus.$emit傳送事件，通過this.bus.$on接收事件

// 定義事件匯流排
let bus = new Vue()
Vue.prototype.bus = bus

// 定義傳送事件
this.bus.$emit('事件名稱', data)

// 定義接收事件 並在回撥中接收引數
this.bus.$on('事件名稱', (data) => {      
})

接下來我們看一段具體範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <person></person>
    <detail />
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  let bus = new Vue()
  Vue.prototype.bus = bus

  Vue.component('person', {
    template: '<div><div>姓名：<input type="text" v-model="name"/></div><div>年齡：<input type="text" v-model="count"/></div><button @click="modify">修改</button></div>',
    data() {
      return {
        name: '句號',
        count: 18
      }
    },
    methods: {
      modify() {
        this.bus.$emit('modify', {name: this.name, count: this.count})
      }
    }
  })
  Vue.component('detail', {
    template: '<div>我是：{{name}}， 我今年 {{count}}歲。</div>',
    data() {
    	return {
        name: '句號',
        count: 18
      }
    },
    mounted() {
      this.bus.$on('modify', (detail) => {
        this.name = detail.name
        this.count = detail.count
      })
    }
  })
  var vm = new Vue({
    el: '#app',
    methods: {
    }
  })
</script>
</html>

程式碼解釋

JS 程式碼第 3-4 行：通過 new Vue() 建立一個 vue 範例，並將它掛載在 Vue 的原型上。這樣，在 vue 元件中可以通過 this.bus 存取到這個範例物件。

JS 程式碼第 5-18 行：定義了元件 person，當點選修改按鈕的時候通過 this.bus.$emit 傳送一個名為 modify 的事件，並將元件內輸入的 name 和 age 作為引數傳遞。

JS 程式碼第 19-33 行：定義元件 detail，在元件內部通過this.bus.$on監聽名為 modify 的事件，當事件觸發時執行修改操作。