vue之父子組件間通訊實例講解(props、$ref、$emit)

 　   組件間如何通訊，也就成爲了vue中重點知識了。這篇文章將會經過props、$ref和 $emit 這幾個知識點，來說解如何實現父子組件間通訊。

　　組件是 vue.js 最強大的功能之一，而組件實例的做用域是相互獨立的，這就意味着不一樣組件之間的數據沒法相互引用。那麼組件間如何通訊，也就成爲了vue中重點知識了。這篇文章將會經過props、$ref和 $emit 這幾個知識點，來說解如何實現父子組件間通訊。

在說如何實現通訊以前，咱們先來建兩個組件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>

　　

這兩部分的代碼都很清晰明瞭，父組件經過import的方式導入子組件，並在components屬性中註冊，而後子組件就能夠用標籤<child>的形式嵌進父組件了。運行father.vue後的效果是這樣的：

示例效果一

1.經過prop實現通訊

子組件的props選項可以接收來自父組件數據。沒錯，僅僅只能接收，props是單向綁定的，即只能父組件向子組件傳遞，不能反向。而傳遞的方式也分爲兩種：

（1）靜態傳遞

子組件經過props選項來聲明一個自定義的屬性，而後父組件就能夠在嵌套標籤的時候，經過這個屬性往子組件傳遞數據了。

<!-- 父組件 -->
 
<template>
 <div>
  <h1>我是父組件！</h1>
  <child message="我是子組件一！"></child> //經過自定義屬性傳遞數據
 </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）動態傳遞

咱們已經知道了能夠像上面那樣給 props 傳入一個靜態的值，可是咱們更多的狀況須要動態的數據。這時候就能夠用 v-bind 來實現。經過v-bind綁定props的自定義的屬性，傳遞去過的就不是靜態的字符串了，它能夠是一個表達式、布爾值、對象等等任何類型的值。

<!-- 父組件 -->
 
<template>
 <div>
  <h1>我是父組件！</h1>
  <child message="我是子組件一！"></child>
 
  <!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
  <child v-bind:message="a+b"></child>
 
  <!-- 用一個變量進行動態賦值。-->
  <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>

2.經過$ref 實現通訊

對於ref官方的解釋是：ref 是被用來給元素或子組件註冊引用信息的。引用信息將會註冊在父組件的 $refs 對象上。

看不懂對吧？很正常，我也看不懂。那應該怎麼理解？看看個人解釋：

1. 若是ref用在子組件上，指向的是組件實例，能夠理解爲對子組件的索引，經過$ref可能獲取到在子組件裏定義的屬性和方法。
2. 若是ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，經過$ref可能獲取到該DOM 的屬性集合，輕鬆訪問到DOM元素，做用與JQ選擇器相似。

那如何經過$ref 實現通訊？下面我將上面prop實現的功能，用$ref實現一遍：

<!-- 父組件 -->
 
<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>

　　

 

從上面的代碼咱們能夠發現，經過ref=‘msg'能夠將子組件child的實例指給$ref，而且經過.msg.getMessage（）調用到子組件的getMessage方法，將參數傳遞給子組件。下面是「 console.log( this.$refs.msg);」打印出來的內容，這可讓你們更加了解，究竟經過ref咱們獲取了什麼：

console.log

最後的效果是這樣的：

示例效果三

這裏再補充一點就是，prop和$ref之間的區別：

1. prop 着重於數據的傳遞，它並不能調用子組件裏的屬性和方法。像建立文章組件時，自定義標題和內容這樣的使用場景，最適合使用prop。
2. $ref 着重於索引，主要用來調用子組件裏的屬性和方法，其實並不擅長數據傳遞。並且ref用在dom元素的時候，能使到選擇器的做用，這個功能比做爲索引更常有用到。

3.經過$emit 實現通訊

上面兩種示例主要都是父組件向子組件通訊，而經過$emit 實現子組件向父組件通訊。

對於$emit官網上也是解釋得很朦朧，我按我本身的理解是這樣的:

?

1	vm.$emit( event, arg )

$emit 綁定一個自定義事件event，當這個這個語句被執行到的時候，就會將參數arg傳遞給父組件，父組件經過@event監聽並接收參數。

<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>