【轉】vue父子組件之間的通訊

標籤：div   sage   this   情況下   ted   展示   name   content   message   

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.$parent一樣並不屬於資料的傳遞而是一種主動的尋找。
盡量避免使用這種方式。因為在父子組件通訊的過程中。父組件是處於高位是擁有控制權，而子組件在多數情況下應該為純視圖組件，只負責視圖的展示和自身視圖的邏輯操作。對外互動的權利應該由父組件來控制。所以應當由父組件傳遞視圖資料給子組件，子組件負責展示。而子組件的對外互動通過$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‘]

【轉】vue父子組件之間的通訊