組件是 vue.js 最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。那么組件間如何通信，也就成為了 vue 中重點知識了。這篇文章將會通過 props、ref 和 emit 這幾個知識點，來講解如何實現(xiàn)父子組件間通信。
在說如何實現(xiàn)通信之前，我們先來建兩個組件 father.vue 和 child.vue 作為示例的基礎。

//父組件
 
<template>
  <div>
    <h1>我是父組件！</h1>
    <child></child>
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
  components: {Child},
}
</script>

//子組件
 
<template>
  <h3>我是子組件！</h3>
</template>
 
<script>
</script>

image.png

1.通過 prop 實現(xiàn)通信

子組件的 props 選項能夠接收來自父組件數(shù)據(jù)。沒錯，僅僅只能接收，props 是單向綁定的，即只能父組件向子組件傳遞，不能反向。而傳遞的方式也分為兩種：

（1）靜態(tài)傳遞

子組件通過 props 選項來聲明一個自定義的屬性，然后父組件就可以在嵌套標簽的時候，通過這個屬性往子組件傳遞數(shù)據(jù)了。

<!-- 父組件 -->
 
<template>
  <div>
    <h1>我是父組件！</h1>
    <child message="我是子組件一！"></child> //通過自定義屬性傳遞數(shù)據(jù)
 </div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
  components: {Child},
}
</script>

<!-- 子組件 -->
 
<template>
  <h3>{{message}}</h3>
</template>
<script>
export default {
  props: ['message'] //聲明一個自定義的屬性
}
</script>

（2）動態(tài)傳遞

我們已經(jīng)知道了可以像上面那樣給 props 傳入一個靜態(tài)的值，但是我們更多的情況需要動態(tài)的數(shù)據(jù)。這時候就可以用 v-bind 來實現(xiàn)。通過 v-bind 綁定 props的自定義的屬性，傳遞去過的就不是靜態(tài)的字符串了，它可以是一個表達式、布爾值、對象等等任何類型的值。

<!-- 父組件 -->
 
<template>
<div>
  <h1>我是父組件！</h1>
  <child message="我是子組件一！"></child>

  <!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
  <child v-bind:message="a+b"></child>

  <!-- 用一個變量進行動態(tài)賦值。-->
  <child v-bind:message="msg"></child>
</div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      a: '我是子組件二！',
      b: 112233,
      msg: '我是子組件三！' + Math.random()
    }
  }
}
</script>

<!-- 子組件 -->
 
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
  props: ['message']
}
</script>

image.png

2.通過 $ref 實現(xiàn)通信

對于 ref 官方的解釋是：ref 是被用來給元素或子組件注冊引用信息的。引用信息將會注冊在父組件的 $refs 對象上。
看不懂對吧？很正常，我也看不懂。那應該怎么理解？看看我的解釋：

• 如果 ref 用在子組件上，指向的是組件實例，可以理解為對子組件的索引，通過 $ref 可能獲取到在子組件里定義的屬性和方法。
• 如果 ref 在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通過 $ref 可能獲取到該 DOM 的屬性集合，輕松訪問到 DOM 元素，作用與 JQ 選擇器類似。

那如何通過 ref 實現(xiàn)通信？下面我將上面 prop 實現(xiàn)的功能，用 $ref 實現(xiàn)一遍

<!-- 父組件 -->
 
<template>
<div>
  <h1>我是父組件！</h1>
  <child ref="msg"></child>
</div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
  components: {
    Child
  },
  mounted: function() {
    console.log(this.$refs.msg);
    this.$refs.msg.getMessage('我是子組件一！')
  }
}
</script>

<!-- 子組件 -->
 
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage(m) {
      this.message = m;
    }
  }
}
</script>

image.png

image.png

• prop 著重于數(shù)據(jù)的傳遞，它并不能調(diào)用子組件里的屬性和方法。像創(chuàng)建文章組件時，自定義標題和內(nèi)容這樣的使用場景，最適合使用prop。
• $ref 著重于索引，主要用來調(diào)用子組件里的屬性和方法，其實并不擅長數(shù)據(jù)傳遞。而且ref用在dom元素的時候，能使到選擇器的作用，這個功能比作為索引更常有用到。

3.通過$emit 實現(xiàn)通信

上面兩種示例主要都是父組件向子組件通信，而通過 emit 實現(xiàn)子組件向父組件通信。
對于$emit官網(wǎng)上也是解釋得很朦朧，我按我自己的理解是這樣的:

vm.$emit( event, arg )

$emit 綁定一個自定義事件 event，當這個這個語句被執(zhí)行到的時候，就會將參數(shù) arg 傳遞給父組件，父組件通過 @event 監(jiān)聽并接收參數(shù)。

<template>
<div>
  <h1>{{title}}</h1>
  <child @getMessage="showMsg"></child>
</div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      title: ''
    }
  },
  methods: {
    showMsg(title) {
      this.title = title;
    }
  }
}
</script>

<template>
<h3>我是子組件！</h3>
</template>
<script>
export default {
  mounted: function() {
    this.$emit('getMessage', '我是父組件！')
  }
}
</script>

image.png