vue父子組件之間的通訊

在vue組件通訊中其中最多見通訊方式就是父子組件之中的通性，而父子組件的設定方式在不一樣狀況下又各有不一樣。最多見的就是父組件爲控制組件子組件爲視圖組件。父組件傳遞數據給子組件使用，遇到業務邏輯操做時子組件觸發父組件的自定義事件。不管哪一種組織方式父子組件的通訊方式都是大同小異。

父組件到子組件通信

父組件到子組件的通信主要爲：子組件接受使用父組件的數據，這裏的數據包括屬性和方法（String,Number,Boolean,Object, Array ,Function）。vue提倡單項數據流，所以在一般狀況下都是父組件傳遞數據給子組件使用，子組件觸發父組件的事件，並傳遞給父組件所須要的參數。

經過props傳遞數據

父子通信中最多見的數據傳遞方式就是經過props傳遞數據，就好像方法的傳參同樣，父組件調用子組件並傳入數據，子組件接受到父組件傳遞的數據進行驗證使用。

<!--父組件-->
<template>
  <div>
    <h2>父組件</h2>
    <br>
    <Child-one :parentMessage="parentMessage"></Child-one>
  </div>
</template>
<script> import ChildOne from './ChildOne'; export default{ components: { ChildOne, }, data() { return { parentMessage: '我是來自父組件的消息', }; }, }; </script>
<style scoped> </style>
複製代碼

<!--子組件-->
<template>
  <div>
    <h3>我是子組件一</h3>
    <span>{{parentMessage}}</span>
  </div>
</template>
<script> export default{ props: ['parentMessage'], }; </script>
<style scoped> </style>
複製代碼

props能夠接受function,因此function也能夠以這種方式傳遞到子組件使用。

經過$on傳遞父組件方法

經過$on傳遞父組件方法是組件通訊中經常使用的方法傳遞方式。它能夠與經過props傳遞方法達到相同的效果。相比於props傳遞function,它更加的直觀和顯示的表現出了調用關係。

<!--父組件-->
<template>
  <div>
    <h2>父組件</h2>
    <br>
    <Child-one @childEvent="parentMethod"></Child-one>
  </div>
</template>
<script> import ChildOne from './ChildOne'; export default{ components: { ChildOne, }, data() { return { parentMessage: '我是來自父組件的消息', }; }, methods: { parentMethod() { alert(this.parentMessage); }, }, }; </script>
<style scoped> </style>

複製代碼

<!--子組件-->
<template>
  <div>
    <h3>我是子組件一</h3>
  </div>
</template>
<script> export default{ mounted() { this.$emit('childEvent'); }, }; </script>
<style scoped> </style>
複製代碼

獲取父組件而後使用父組件中的數據（不推薦）

準確來講這種方式並不屬於數據的傳遞而是一種主動的查找。父組件並無主動的傳遞數據給子組件，而是子組件經過與父組件的關聯關係，獲取了父組件的數據。 該方法雖然能實現獲取父組件中的數據可是不推薦這種方式，由於vue提倡單向數據流，只有父組件交給子組件的數據子組件纔有使用的權限，不容許子組件私自獲取父組件的數據進行使用。在父與子的關係中子應當是處於一種被動關係。

this.$parent
複製代碼

此處的this爲子組件實例

子組件到父組件通信

子組件到父組件的通信主要爲父組件如何接受子組件之中的數據。這裏的數據包括屬性和方法（String,Number,Boolean,Object, Array ,Function）。

經過$emit傳遞父組件數據

與父組件到子組件通信中的$on配套使用，能夠向父組件中觸發的方法傳遞參數供父組件使用。

<!--父組件-->
<template>
  <div>
    <h2>父組件</h2>
    <br>
    <Child-one @childEvent="parentMethod"></Child-one>
  </div>
</template>
<script> import ChildOne from './ChildOne'; export default{ components: { ChildOne, }, data() { return { parentMessage: '我是來自父組件的消息', }; }, methods: { parentMethod({ name, age }) { console.log(this.parentMessage, name, age); }, }, }; </script>
<style scoped> </style>

複製代碼

<!--子組件-->
<template>
  <div>
    <h3>我是子組件一</h3>
  </div>
</template>
<script> export default{ mounted() { this.$emit('childEvent', { name: 'zhangsan', age: 10 }); }, }; </script>
<style scoped> </style>
複製代碼

refs獲取

能夠經過在子組件添加ref屬性，而後能夠經過ref屬性名稱獲取到子組件的實例。準確來講這種方式和this.emit觸發父組件中相應的方法，再由父組件處理相應邏輯。

<template>
  <div>
    <h2>父組件</h2>
    <br>
    <Child-one ref="child"></Child-one>
  </div>
</template>
<script> import ChildOne from './ChildOne'; export default{ components: { ChildOne, }, mounted(){ console.log(this.$refs['child']); }, }; </script>
<style scoped> </style>
複製代碼

this.$refs['child']
複製代碼